vue cli4配置proxy代理,解決跨域問題

在開發的時候,爲了防止跨域的問題,其實能夠直接在vue裏配置proxy代理。我使用的是vue cli4。
1,找到項目根目錄的vue.config.js文件。
2,配置devServer對象。
配置以下:css

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就會自動轉發到代理的地址上。
瀏覽器就認爲請求的是本地,因此就不會出現跨域的問題了。vue

相關文章
相關標籤/搜索