前端 vue.config.js 处理跨域问题 proxy 代理

问: 业务中的跨域问题是如何解决的？

这个的话我们公司⼤概分了俩种环境，⼀种是开发的时候，⼀种是上⽣产的时候，开发的时候因为要对 接的后端可能会⽐较多，他们配置不太⽅便，这个时候采取的是⽐较⽅便的前端代理的⽅案，和谁对接 的时候就把target设置为对⽅的接⼝ip 解决跨域问题 要是上⽣产的话 通常就是后端来配置⼀个服务 cors

追问: proxy代理⽅案的原理是什么？

跨域的产⽣原因其实就是三要素不⼀致，加上浏览器同源策略导致的，如果我可以在前端和接⼝端之间 架设⼀台之间服务器，保证它和前端三要素⼀致，和接⼝端因为是服务对服务不⾛浏览器 所以不跨域 就可以解决这个问题

追问: 那你了解跨域产⽣时，数据到底有没有发出去？

事实上数据是能发送到服务端的，那边也能接收到请求，只不过数据在返回客户端的时候被浏览器给拦 截了

解决：

  devServer: {
    port: port, // 运行端口
    open: false, // 是否自动打开浏览器
    overlay: {
      warnings: false,
      errors: true,
    },
    // 解决跨域问题
    // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
    // localhost:8888/api/abc  => 代理给另一个服务器
    // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）
    // 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）
    proxy: {
      "/api": {
        target: "http://ihrm-java.itheima.net/", // 跨域地址
        changeOrigin: true, // 要跨域
        // 路径不需要重写 因为接口都在 http://ihrm-java.itheima.net/api 下面
      },
    },
    //请注释掉vue.config.js中的 before: require('./mock/mock-server.js')
    // 用不到模拟数据 mock 部分
    // before: require('./mock/mock-server.js')
  },