本地开发跨域问题, proxy解决

设置代理解决跨域

在vue-cli搭建的项目中有一个config文件夹，里有一个index.js文件，里面的dev大概是这样：

dev: {
   	// Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,
    cssSourceMap: true
}

将dev中的proxyTable改成这样:

  proxyTable: {
 	  // 这里的‘/api’就指向了127.0.0.1:3000
      "/api": { 
        target: "http://127.0.0.1:3000", // 接口域名
        secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true,  //是否跨域
      //   pathRewrite: {
      //     "^/api": "" //需要rewrite的,
      //   }
      }
    }

如果本身的接口地址就有 ‘/api’ 这种通用前缀，也就是说http://127.0.0.1:3000/api，就可以把 pathRewrite 删掉。

---

最后，重新启动项目，npm run dev 你就会发现跨域问题解决了。