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

小鸡爱大米

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

1.nginx配置允许跨域

1. worker_processes  1;
   
2. 
   
3. events {
   
4.     worker_connections  1024;
   
5. }
   
6. 
   
7. http {
   
8.     include       mime.types;
   
9.     default_type  application/octet-stream;
   
10.     sendfile        on;
    
11.        
    
12.     server {
    
13.                 listen 80;
    
14.                 # 域名
    
15.                 server_name localhost;
    
16.                 # 服务器根目录
    
17.                 root H:\php\project\UserManager\public;
    
18.                 # 默认读取的文件
    
19.                 index index.php index.html index.htm;
    
20. 
    
21.                 location / {
    
22.                         # 允许浏览器跨域请求
    
23.                         if ($request_method = 'OPTIONS') {
    
24.                 add_header Access-Control-Allow-Origin '*';
    
25.                 add_header Access-Control-Allow-Headers '*';
    
26.                 add_header Access-Control-Allow-Methods '*';
    
27.                 add_header Access-Control-Allow-Credentials 'true';
    
28.                 return 204;
    
29.             }
    
30.             
    
31. 
    
32.                         if (!-e $request_filename) {
    
33.                                 rewrite ^(.*)$ /index.php?s=/$1 last; break;
    
34.                         }
    
35.                         try_files $uri $uri/ /index.php?$query_string;
    
36.                 }
    
37. 
    
38.                 # 监听127.0.0.1:9000端口，要和php-cgi.exe配置的ip:端口一致
    
39.                 location ~ \.php$ {
    
40.                         fastcgi_pass 127.0.0.1:9000;
    
41.                         include fastcgi_params;
    
42.                         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    
43.                 }
    
44.         }
    
45. 
    
46. }

复制代码

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

2.在ThinkPHP中允许跨域

编辑middleware.php文件

1. <?php
   
2. // 全局中间件定义文件
   
3. return [
   
4.     //允许跨域
   
5.     //\think\middleware\AllowCrossDomain::class
   
6.     \app\middleware\AllowCrossDomain::class
   
7.     // 全局请求缓存
   
8.     // \think\middleware\CheckRequestCache::class,
   
9.     // 多语言加载
   
10.     // \think\middleware\LoadLangPack::class,
    
11.     // Session初始化
    
12.     // \think\middleware\SessionInit::class
    
13. ];

复制代码

1. <?php
   
2. declare (strict_types = 1);
   
3. 
   
4. namespace app\middleware;
   
5. 
   
6. use Closure;
   
7. use think\Config;
   
8. use think\Request;
   
9. use think\Response;
   
10. 
    
11. /**
    
12. * 跨域请求支持
    
13. */
    
14. class AllowCrossDomain
    
15. {
    
16.     protected $cookieDomain;
    
17. 
    
18.     protected $header = [
    
19.         'Access-Control-Allow-Credentials' => 'true',
    
20.         'Access-Control-Max-Age'           => 1800,
    
21.         'Access-Control-Allow-Methods'     => 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
    
22.         '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',
    
23.     ];
    
24. 
    
25.     public function __construct(Config $config)
    
26.     {
    
27.         $this->cookieDomain = $config->get('cookie.domain', '');
    
28.     }
    
29. 
    
30.     /**
    
31.      * 允许跨域请求
    
32.      * @access public
    
33.      * @param Request $request
    
34.      * @param Closure $next
    
35.      * @param array   $header
    
36.      * @return Response
    
37.      */
    
38.     public function handle($request, Closure $next, ? array $header = [])
    
39.     {
    
40.         $header = !empty($header) ? array_merge($this->header, $header) : $this->header;
    
41. 
    
42.         if (!isset($header['Access-Control-Allow-Origin'])) {
    
43.             $origin = $request->header('origin');
    
44. 
    
45.             if ($origin && ('' == $this->cookieDomain || strpos($origin, $this->cookieDomain))) {
    
46.                 $header['Access-Control-Allow-Origin'] = $origin;
    
47.             } else {
    
48.                 $header['Access-Control-Allow-Origin'] = '*';
    
49.             }
    
50.         }
    
51. 
    
52.         return $next($request)->header($header);
    
53.     }
    
54. }

复制代码

到此这篇关于Nginx+ThinkPHP+Vue解决跨域问题的方法详解的文章就介绍到这了,更多相关Nginx ThinkPHP解决跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/program/319139swq.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！