效果图

跨域报错

跨域解决

方案实测

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