关于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;
    }
}       

安装系统环境

• centos8及以上
• nodejs18及以上
• php8及以上
• redis
• mysql
• php拓展:fileinfo、redis