Nginx+ThinkPHP+Vue解决跨域问题的方法详解

这篇文章主要为大家详细介绍了Nginx+ThinkPHP+Vue解决跨域问题的方法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下

目录

1.nginx配置允许跨域2.在ThinkPHP中允许跨域

解决过程主要有两个步骤。

1.nginx配置允许跨域

worker_processes  1; events {    worker_connections  1024;} http {    include       mime.types;    default_type  application/octet-stream;    sendfile        on;    server {listen 80;# 域名server_name localhost;# 服务器根目录root H:\php\project\UserManager\public;# 默认读取的文件index index.php index.html index.htm; location / {# 允许浏览器跨域请求if ($request_method = 'OPTIONS') {                add_header Access-Control-Allow-Origin '*';                add_header Access-Control-Allow-Headers '*';                add_header Access-Control-Allow-Methods '*';                add_header Access-Control-Allow-Credentials 'true';                return 204;            }             if (!-e $request_filename) {rewrite ^(.*)$ /index.php?s=/$1 last; break; } try_files $uri $uri/ /index.php?$query_string;} # 监听127.0.0.1:9000端口，要和php-cgi.exe配置的ip:端口一致location ~ \.php$ {fastcgi_pass 127.0.0.1:9000;include fastcgi_params;fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;}} }

其中的“允许浏览器跨域请求”是关键点，因为浏览器在发现网页请求是跨域请求时，会再发送一个OPTIONS请求，只有这个请求成功了才会允许跨域请求，此时，要强行配置允许跨域。（这里配置的是允许全部请求跨域）

2.在ThinkPHP中允许跨域

编辑middleware.php文件

<?php// 全局中间件定义文件return [    //允许跨域    //\think\middleware\AllowCrossDomain::class    \app\middleware\AllowCrossDomain::class    // 全局请求缓存    // \think\middleware\CheckRequestCache::class,    // 多语言加载    // \think\middleware\LoadLangPack::class,    // Session初始化    // \think\middleware\SessionInit::class];

<?phpdeclare (strict_types = 1); namespace app\middleware; use Closure;use think\Config;use think\Request;use think\Response; /** * 跨域请求支持 */class AllowCrossDomain{    protected $cookieDomain;     protected $header = [        'Access-Control-Allow-Credentials' => 'true',        'Access-Control-Max-Age'           => 1800,        'Access-Control-Allow-Methods'     => 'GET, POST, PATCH, PUT, DELETE, OPTIONS',        'Access-Control-Allow-Headers'     => 'Token, Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With',    ];     public function __construct(Config $config)    {        $this->cookieDomain = $config->get('cookie.domain', '');    }     /**     * 允许跨域请求     * @access public     * @param Request $request     * @param Closure $next     * @param array   $header     * @return Response     */    public function handle($request, Closure $next, ? array $header = [])    {        $header = !empty($header) ? array_merge($this->header, $header) : $this->header;         if (!isset($header['Access-Control-Allow-Origin'])) {            $origin = $request->header('origin');             if ($origin && ('' == $this->cookieDomain || strpos($origin, $this->cookieDomain))) {                $header['Access-Control-Allow-Origin'] = $origin;            } else {                $header['Access-Control-Allow-Origin'] = '*';            }        }         return $next($request)->header($header);    }}