vue-cli 跨域问题代理解决方案：devServer配置

背景：

---

在我们使用Vue直接请求后端时，通常会报跨域问题，如下图：

要解决这个问题，方案有很多种，最简单的莫过于vue-cli的devServer配置。

devServer配置

---

在vue项目下创建vue.config.js文件，如下图：

在vue.config.js中写入devServer配置，例如：

module.exports = {
    devServer: {
      proxy: {
        "/api": {
          target: "http://localhost:8081/",
          pathRewrite: {
            "^/api": "",
          },
        },
      },
    },
  };

调用时，比如axios.get("/api/xxx");会被自动代理到http://localhost:8081/xxx上