效果圖

跨域報錯

跨域解決

方案實測

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...