«

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

腾逍技术 发布于 阅读：507 PHP

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

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

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:\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文件

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// 全局中间件定义文件
return [
    //允许跨域
    //\think\middleware\AllowCrossDomain::class
    \app\middleware\AllowCrossDomain::class
    // 全局请求缓存
    // \think\middleware\CheckRequestCache::class,
    // 多语言加载
    // \think\middleware\LoadLangPack::class,
    // Session初始化
    // \think\middleware\SessionInit::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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?php
declare (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);
    }
}

Nginx+ThinkPHP+Vue解决跨域问题的方法详解的文章就介绍到这了！