vue3项目打包,部署到nginx之后跨域

在vue.config.js中配置devserver的proxy进行代理请求配置，然后将所有请求改为/api开头的即可。但是这样配置只在开发阶段起作用。所以在nginx上部署的时候，需要再重新配置请求代理。

vue.config.js中代码配置如下：

devServer: {
    port:8089, // 启动端口
    open:true,  // 启动后是否自动打开网页
    proxy: {
        "/api": {
            target: "http://192.168.xx.xx:8083", // 如果访问/api就在其前面加target
            changeOrigin: true, // 跨域
            pathRewrite: {
                "^/api": '' //再把访问路径中的/api替换掉
            }
        }
    }
}

在nginx中配置跨域

server {
        listen       8091;
        server_name  localhost;
        location / {
            root   web/dist;// 打包文件地址
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location ^~/api/ {
            proxy_pass https://xxxx.com; // 你的服务器ip
            proxy_set_header HOST $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto  $scheme;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

但是,配置好之后,运行依旧跨域 需要在vue项目的.env.development文件中配置当前服务器的地址,并重新打包替换之前nginx的dist包

# 开发环境  
# 对应vue.config.js的proxy的代理  
module.export={  
    VUE_APP_URL=http://localhost:8091 // nginx发布的地址
}

再重新启动nginx就可以啦

使用 nginx -s reload 重启nginx

跨域就解决啦~~~