vue中 axios使用proxy代理，打包之后跨域

Question

问题描述

接手一个别人的项目，使用的是vue3
在根目录下的 vue/config.js配置服务器代理

    // vue/config.js
    // webpack-dev-server 相关配置
    devServer: {
        open: true,
        // host: "0.0.0.0",
        port: 8080,
        // contentBase: path.resolve(__dirname, "public"),
        https: false,
        hotOnly: false,
        proxy: {
            "/api": {
                target: Url,  // 外部引入的url,连接的后端的服务器
                ws: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
        //before: app => {}
    },

---

然后在fetch.js 生成 axios实例，并且引用代理

fetch.js
import axios from 'axios'
// 创建 axios 实例
const service = axios.create({
    baseURL: '/api', // 这里使用配置过的代理
    timeout: 10000 
});

这种情况在开发模式里，可以连接后端
但是npm run build 打包生成dist文件后，连接服务器则显示跨域
如图：

---

后来 我用以前的老方法 在fetch.js文件里设置baseUrl

// fetch.js
let Url = require("../../public/projectConfig").Url
// 创建 axios 实例
const service = axios.create({
    baseURL: Url,
    timeout: 10000 // 请求超时时间
});

这种情况是可以连接到后端服务器的，并且打完包后的dist文件也可以连接后端服务器
后端出了一些bug，虽然没有了跨域的问题，但是后端的安全框架无法识别登陆状态，好像需要proxyTable什么的

求知：为什么使用proxy代理打包后反而形成了跨域，而老老实实写baseUrl却没有问题。 后端为什么识别不出登录状态

Answer 1

反向代理 是开发时可能需要的 打包到生产是不用反向代理的 必须去掉 不去掉请求地址发生变化不符合同源策略肯定跨域

Answer 2

本地代理是开发环境才会生效，打包为生产环境后会自动失效，也就是说上面的配置不需要去做调整，本身就是没问题的，之所以打包之后会出现跨域，是因为后台接口服务没有配置响应头的跨域机制，以java为例（response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization")），当然，如果后台服务本身设计就是为了安全不开放跨域访问，那可以将打包之后的前端代码放在nginx内，并设置反向代理到对应的接口服务即可