Vue 配置跨域问题

我们在使用 vue-cli 工具生成 vue 项目时

vue init webpackmy-project-vue

在生成的项目结构中，会有一个config > index.js 文件

在 index.js 中有一个 proxyTable 的空节点

proxyTable 是 vue-cli 脚手架在开发模式下给我们提供的一个跨域的代理中转服务器

1. proxyTable 跨域的基本原理：
在开发模式下，webpack 会为我们提供一个 http 代理服务器
在我们请求接口的时候，实际上是请求 webpack 提供的这个 HTTP 代理服务器
再由这个代理服务器去请i去真实的数据服务器
最后数据通过webpack 代理服务器传入 vue 程序

2. proxyTable 属性配置：

3. 关于 proxyTable 节点说明：
首先，在 proxyTable 模块中设置了 ‘/api’ ，target 中设置服务器地址，也就是接口开头的那段地址，例如 http:/localhost:54321/， 然后我们在第哦啊用接口的时候，就可以全局使用 /api ， 这时候 /api 的作用就相当于 http:/localhost:54321/；比如接口地址是 http:/localhost:54321/api/json.data，我们就可以使用 /api/json.data

4. pathRewrite：相当于是替代 /api ，如果接口中没有 api 那就直接置空，如果有 api 那就得写成 '^/api' : '/api'，可以理解为重定向或者重新赋值的功能

总结：

• proxy Table 就是 webpack 在开发环境给我们提供的一个代理服务器（使用的是 http-proxy-middleware）
• 目的是为了在服务器端不方便开启跨域的时候，我们也能方便的在开发阶段发送 ajax 跨域请求
• 当真实发布环境就不起作用了，除非自己配置一个代理服务器，或者让后台开启 cors