小鸡爱大米 发表于 2024-4-13 14:34:24

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

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

1.nginx配置允许跨域

worker_processes1;

events {
    worker_connections1024;
}

http {
    include       mime.types;
    default_typeapplication/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
];<?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解决跨域问题的方法详解的文章就介绍到这了,更多相关Nginx ThinkPHP解决跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:https://www.jb51.net/program/319139swq.htm
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: Nginx+ThinkPHP+Vue解决跨域问题的方法详解