需求场景
前后端分离,本地服务端使用了8762接口,而我前端dev环境使用9000端口,这时候如果请求8762端口的数据接口,很明显会由于跨域的问题而请求失败,如果让后端做允许开发有麻烦,怎么办呢?
解决方案
随着前端技术的发展,es6以及前端构建工具都成了主流技术,不会用都不好意思出来混了。平时用webpack时用的比较多的本地服务器是webpack-dev-server,刚好它自身集成了代理功能,只要在webpack.dev.config.js里的devServer配置里,加上一段代理配置就能实现跨域了。
使用方法与代码
配置前的devServer代码是:
devServer:{
contentBase: path.join(__dirname,'./release'),
open:true,
port:9000
},
这时候我们的服务器端口为9000,假设我们原先的请求方式是这样的:
axios.get('http:localhost:8762/distribution/pageList').then(function(response){
console.log(response)
})
由于端口不一样,跨域报错是必然的。怎么配置呢?这时候我们要看接口的规律,例如我们这个接口并没有/api,而是有/distribution这个路径,那我们就把所有包含/distribution的请求反向代理到localhost:9000去,可以这样改:
devServer:{
contentBase: path.join(__dirname,'./release'),
open:true,
port:9000,
proxy: {
'/distribution': {
target: 'http://localhost:8762'
}
}
}
这时候我们再把请求改成这样:
axios.get('/distribution/pageList').then(function(response){
console.log(response)
})
这时候我们浏览器控制台里看到的请求是:http://localhost:9000/distribution/pageList,但实际请求是:http:localhost:8762/distribution/pageList,再测试下,这时候会发现数据正常返回,没有报跨域错误了。