vue3+vite打包上线 nginx代理解决跨域
vue3 在项目开发阶段,面对跨域问题,是在vite.config.js中使用proxy代理解决的,vue项目打包后,使用nginx代理上线,发现post请求跨域,经查为vite.config.js中proxy失效导致,解决方法也简单,在nginx.conf中重新使用proxy即可,无需修改原代码
nginx.conf配置如下:
listen 80;//端口,随便写,自定义
server_name xxxx;//本机ip地址 或者localhost即可
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root E:\\vue3\\vue_common\\taxi_manager_vue3\\dist;//切记,windows中要用双斜杠,不然会报错,踩了一天坑
index index.html index.htm;
try_files $uri $uri/ @router;
}
#proxy代理部分
location /api/ {
#rewrite ^(.*)api(.*)$ $1/$2; break;
proxy_pass http://10.xx.xx.220; # 代理接口地址,服务器api的地址,我的项目,220后面不能加/,不然post请求会报404,一般404就是nginx代理设置没有对
}
#nginx代理vue3,这块也是要有的,路由设置
location @router {
rewrite ^.*$ /index.html last;
}