前几天做慕课网练手项目,跨域代理问题怎么业代理不上,于是查询了下文档,总结下
- 如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。
- 这个问题可以通过
vue.config.js
中的devServer.proxy
选项来配置。
1 module.exports = {
2 devServer: {
3 host: '0.0.0.0',
4 port: 8000,
5 open: true,
6 overlay: {
7 warnings: false,
8 errors: true
9 },
10 proxy: {
11 '/api': {
12 target: 'http://apis.imooc.com',// 要访问的跨域的域名
13 changeOrigin: true, // //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样客户端端和服务端进行数据的交互就不会有跨域问题
14 pathRewrite: { //// 思路是如果是开发环境,就给所有要代理的接口统一加上前缀,然后代理请求时再统一通过rewrite去掉
15 '^api': ''
16 }
17 }
18 }
19 }
20 }
更多详细配置可以查询 https://github.com/chimurai/http-proxy-middleware#proxycontext-config
本质就是node服务器转发