Webpack使用代理接口方式解决跨域
webpack.config.js页面配置
proxy: {
// 将包含/api的接口地址中target变量中的内容替换为当前页面的地址
'/api': { // 要匹配的接口地址
target: 'http://xxx.xx.com', // 要请求的服务器域名地址
changeOrigin: true, // 是否使用域名
secure: false // 是否支持HTTPS
}
}
配置中主要的参数说明
2.1 ‘/api’
捕获API的标志,如果API中有这个字符串,那么就开始匹配代理,
比如API请求/api/users, 会被代理到请求 http://www.baidu.com/api/users 。
2.2 target
代理的API地址,就是需要跨域的API地址。
地址可以是域名,如:http://www.baidu.com
也可以是IP地址:http://127.0.0.1:3000
如果是域名需要额外添加一个参数changeOrigin: true,否则会代理失败。
2.3 pathRewrite
路径重写,也就是说会修改最终请求的API路径。
比如访问的API路径:/api/users,
设置pathRewrite: {’^/api’ : ‘’},后,
最终代理访问的路径:http://www.baidu.com/users,
这个参数的目的是给代理命名后,在访问时把命名删除掉。
2.4 changeOrigin
这个参数可以让target参数是域名。
2.5 secure
secure: false,不检查安全问题。
设置后,可以接受运行在 HTTPS 上,可以使用无效证书的后端服务器
2.6 其他参数配置查看http-proxy-middleware文档
Host配置
本地host配置域名:127.0.0.1 test.l.com
服务器ip配置域名:192.168.0.10 div.server.com
如何测试接口是否正常?
- 浏览器直接请求服务器接口地址
- 浏览器打开test.l.com + port + ‘/api/xxx’ 可以成功调用说明代理配置成功