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

AD钙奶2134

目录

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

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

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解决跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

清清

感谢分享，受益匪浅！

凉拌香菜。

我不确定这个信息的准确性，请再确认一下

531262422

保持尊重和礼貌对待其他成员是必要的。

Sunny13

我完全同意你的观点

蓝天白云888

顶一个，观点非常中肯！

无形杀金士顿

666666666666666666

Kuwait

每日一回

十年国战玩家ok

666666666666

顾北○

我不太确定，可能需要再确认一下。