关于vue3和thinkphp8部署在宝塔时访问thinkphp public静态文件存在跨域或者是请求数据存在跨域的解决方法

本文主要是介绍关于vue3和thinkphp8部署在宝塔时访问thinkphp public静态文件存在跨域或者是请求数据存在跨域的解决方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前端打包后上传到后端的public目录下,注意dist目录里面的所有文件都要上传,其中包含dist本身.

前端访问:http://域名/index.html

前后端统一域名网址设置伪静态-设置后重启nginx

# 如果是访问api的，则由thinkphp处理
location /api {if (!-e $request_filename){rewrite  ^(.*)$  /index.php?s=$1  last;   break;}
}# 其他的由vue处理，并重新设置根目录为public下的dist，优先访问index
location / {root   /www/wwwroot/api.xtgmf.ltd/public/dist;index  index.html index.htm;try_files $uri $uri/ /index.html;
}

前后端分离配置伪静态

location ~ \.php(.*)$ {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';add_header Access-Control-Max-Age: 86400;if ($request_method = 'OPTIONS') {return 204;}
}location /uploadFiles {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';if ($request_method = 'OPTIONS') {add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}
}