vue-cli 4.0 devServer proxy配置 解决跨域问题

在vue-cli项目下新建一个vue.config.js文件，可以在这个文件里对devServer进行配置。

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：
例如：

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

image.png

这样配置的含义就是：
对于请求：axios.get(’/oss/index.php?r=xxx/xxx/xxx’)
实际的请求为：
http://打码处.baidu.com:8093/oss_jlog/index.php?r=xxx/xxx/xxx
这样可以避免前端应用和后端 API 服务器没有运行在同一个主机上，或者端口不同等造成的跨域问题。