vue-cli4配置proxy代理解决跨域问题

46次阅读

共计 756 个字符,预计需要花费 2 分钟才能阅读完成。

在开发的时候,为了避免跨域的问题,其实能够间接在 vue 里配置 proxy 代理。我应用的是 vue cli4。
1,找到我的项目根目录的 vue.config.js 文件。
2,配置 devServer 对象。
配置如下:


module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  lintOnSave: false,
  productionSourceMap: false,
  css: {sourceMap: false},
  devServer: {
    disableHostCheck: true,
    // 上面这种即可
    proxy: {
      "/channel": {
        target: "http://192.168.0.10:8080",// 接口的地址
        changeOrigin: true,
        pathRewrite: {// "^/kuai": ""}
      },
    },
    // 这种形式不反对
    // proxy: {//   context: ["/token", "/channel", "/common", "/file", "/callback"],
    //   target: "http://10.0.98.105:8080",
    //   changeOrigin: true,
    //   secure: false
    // }
  },
  chainWebpack: config => {},
  configureWebpack: config => {if (process.env.NODE_ENV === "production") {
      return {plugins: pluginList};
    }
  }
};

因为我发动申请时是申请 / 所以默认是本地 vue 我的项目的启动地址,加了代理后,只有匹配上了 /channel 就会主动转发到代理的地址上。
浏览器就认为申请的是本地,所以就不会呈现跨域的问题了。

正文完
 0