效果图
跨域报错
跨域解决
方案实测
1. nginx、apache站点配置 > OK
2. thinkphp框架内置中间件 “跨域请求支持” > OK
3. 纯前端vue、vite的server.proxy代理 > 不OK
方案具体设置
1. nginx、apache站点配置 > OK
修改nginx服务器的站点的跨域信息
日志下面添加:
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 无效,浏览器里面还是报错!
export default defineConfig({server: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},}},
})
ending...