Nginx+ThinkPHP+Vue解决跨域问题的方法详解
本文最后更新于14 天前,其中的信息可能已经过时,如有错误请发送邮件到big_fw@foxmail.com

Nginx配置允许跨域

为了让Nginx支持跨域请求,你需要在Nginx的配置文件中添加相应的指令。以下是一个基本的配置示例:

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;
        }
    }
}

在这个配置中,location /块中的if条件检查是否为OPTIONS请求,如果是,则添加相应的CORS头部。这样可以确保浏览器在发起跨域请求之前,先发送一个OPTIONS预检请求,只有这个请求成功了,后续的请求才会被允许。

ThinkPHP配置允许跨域

在ThinkPHP中,你需要创建一个自定义的中间件来处理跨域请求。以下是一个简单的中间件示例:

<?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) ? $header : $this->header;
        foreach ($header as $key => $value) {
            header("{$key}: {$value}");
        }
        return $next($request);
    }
}

在这个中间件中,你定义了一系列的CORS头部,并在处理请求时添加这些头部。这样,当ThinkPHP框架处理跨域请求时,就会自动添加这些CORS头部。

Vue配置允许跨域

在Vue项目中,你可以通过配置devServer来实现跨域。以下是一个配置示例:

devServer: {
    proxy: {
        '/': {
            target: process.env.VUE_APP_API_BASE_URL,
            changeOrigin: true,
            pathRewrite: {
               '^/': ''
            }
        }
    }
},

在这个配置中,proxy选项指定了一个目标地址,changeOrigin设置为true表示改变源地址,pathRewrite用于重写路径。这样,Vue开发服务器就会将所有请求转发到指定的目标地址,而不是本地地址。

原文标题:Nginx+ThinkPHP+Vue解决跨域问题的方法详解
原文地址:https://www.ao14.cn/archives/248
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇