前端跨域解决方案之proxy跨域代理
1.webpack配置代理2.vue-config配置代理
1.webpack配置代理
1.1配置信息
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com/',
pathRewrite: {
'^/api': ''
},
changeOrigin: true,
secure: false,
}
}
}
}
1.2配置中主要的参数说明
1.2.1 ‘/api’
捕获API的标志,如果API中有这个祖父出窜,那么就开始匹配代理,比如API请求/api/users
,会被代理到http://www.baidu.com/api/users。
1.2.2 target
代理API地址,就是需要跨域的API地址。地址可以是域名,也可以是IP地址。如果是域名需要额外添加一个参数changeOrigin: true
,否则会代理失败
1.2.3 pathRewrite
路径重写,也就是说会修改最终请求的API路径。比如访问的API路径/api/users
,设置pathRewrite: {'^/api' : ''},
后,最终代理访问的路径为:http://www.baidu.com/users,这个参数的目的是给大力命名后,在访问时把命名删除掉。
1.2.4 changeOrigin
这个参数可以让target参数是域名
1.2.5 secure
secure: false
,不检查安全问题。设置后,可以接受运行在HTTPS上,可以使用无效证书的后端服务器。
1.2.6 其他参数配置查看http-proxy-middleware文档
其他的配置参数等信息,可以查看这里:https://github.com/chimurai/http-proxy-middleware
2.vue-config配置代理
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com/',
pathRewrite: {
'^/api': ''
}
}
}
}
}
配置方式与配置信息与webpack一样,完全可以参考webpack的api
3.参考资料
webpack-dev-server:https://github.com/webpack/webpack-dev-server
http-proxy-middleware:https://github.com/chimurai/http-proxy-middleware
webpack官网 devServer.proxy配置:https://webpack.docschina.org/configuration/dev-server/#devserver-proxy
vue-cli vue-config:https://cli.vuejs.org/zh/config/#vue-config-js
更多推荐
所有评论(0)