解决过程主要有两个步骤。
1.nginx配置允许跨域
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 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:phpprojectUserManagerpublic; # 默认读取的文件 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文件
1 2 3 4 5 6 7 8 9 10 11 12 | <?php // 全局中间件定义文件return [ //允许跨域 //thinkmiddlewareAllowCrossDomain::class appmiddlewareAllowCrossDomain::class // 全局请求缓存 // thinkmiddlewareCheckRequestCache::class, // 多语言加载 // thinkmiddlewareLoadLangPack::class, // Session初始化 // thinkmiddlewareSessionInit::class]; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | '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); }} |
到此这篇关于Nginx+ThinkPHP+Vue解决跨域问题的方法详解的文章就介绍到这了,更多相关Nginx ThinkPHP解决跨域内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
