在js使用ajax请求后台接口的数据时,新人会遇到跨域问题,也许你已经通过百度,知道了怎么通过代理
解决跨域问题,那么,原理是什么
当遇到跨域情况时,控制台会有以下类似的报错
*Access to XMLHttpRequest at ‘xxxxxxxxxxxxxxxxx’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No
‘Access-Control-Allow-Origin’ header is present on the requested
resource.
为更好的演示跨域和代理,直接上图
代理的原理,就是这样的。
接下来附上vue配置跨域的代码
//在于src同级目录创建vue.config.js
module.exports = {
devServer:{
open:true,
proxy: {
//这个/api要用字符串形式,意思是检测到请求中有这个东西,就进行代理
'/api': {
//target是要代理的目标地址,也就是后台接口地址
target: 'http://121.89.233.78:8080/v1/',
//这个是把请求头中的host字段也改变,host字段默认也是本地地址,
//开启这个,host字段也会改变
changeOrigin: true,
//最后这个,是把请求中的指定字段替换掉
//例如:/api这个开头,我只是想用来开启代理,真正的接口中并没有这个东西,
//那就可以把这个东西替换成/
pathRewrite: {
'^/api': '/'
}
}
}
}
}
更多关于同源策略,代理,vue.config.js的内容,百度吧,少年