CORS解决跨域问题的多个方案 - nginx站点配置 / thinkphp框架内置中间件 / 纯前端vue、vite的server.proxy代理

效果图

跨域报错

跨域解决

方案实测

nginx、apache站点配置 > OK
thinkphp框架内置中间件 "跨域请求支持" > OK
纯前端vue、vite的server.proxy代理 > 不OK

方案具体设置

1. nginx、apache站点配置 > OK

修改nginx服务器的站点的跨域信息

日志下面添加：

bash 复制代码

add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

重启nginx，生效！

参考自 https://www.cnblogs.com/zhoading/p/15987927.html

2. thinkphp框架内置中间件 "跨域请求支持" > OK

其中，两种方式：

1）tp8新增的"ThinkPHP跨域扩展 "，不生效 ....不生效 ....不生效....

https://doc.thinkphp.cn/v8_0/cross_route.html

安装
复制代码
composer require topthink/think-cors
配置config/cors.php
复制代码
[
    'paths' => ['api/*'],
    ...
]

2）tp传统的中间件"跨域请求支持 "，有效果 ！有效果 ！有效果！

手册 https://doc.thinkphp.cn/v8_0/middleware.html

增加 think\middleware\AllowCrossDomain 到middleware.php，

单应用的话，tp根目录\app\middleware.php；

多应用的话，tp根目录\app\应用名\middleware.php；

3. 纯前端vue、vite的server.proxy代理 > *不OK ...**不OK ...*不OK ...

使用vite的server.proxy代理，解决跨域问题

修改项目的vite.config.js

例如vben admin大仓里面的某个应用 vue-vben-admin\apps\web-antd\vite.config.mts，原内容...

参考自： https://segmentfault.com/a/1190000043775780 无效，浏览器里面还是报错！

javascript 复制代码

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  },
})

ending...