我们在使用 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