一.发送ajax请求的方式
- xhr(XMLHttpRequest):xhr.open()、xhr.send()
- jQuery:封装了XHR,体积小,支持请求、响应拦截器
- axios:封装了XHR,vue官方推荐
- fetch:跟xhr平级,但是对IE浏览器的兼容性不好
二.跨域产生的原因
当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作跨域。
三.对跨域的误解
当浏览器向服务器发起请求时,即使存在跨域问题,服务器依旧是会响应请求,并返回数据给浏览器,但当浏览器拿到数据后发现存在跨域问题了,这时候浏览器就不会将数据给页面,相当于把数据给扣留了(如下图)。
并不是说,发生跨域时请求根本就发不出去,或者服务器拿到请求不会响应啥的,这些都是错误的想法(我之前就是这么觉得的)。
四.跨域的解决办法
- cors:服务器端配置,不用前端配置(真正意义上的解决跨域)
- jsonp:利用script标签的src属性不受同源策略限制的特点,但只能解决get请求,需前后端配合
- 代理服务器:与前端页面同源,由他返回的数据就不存在跨域的问题,如图。 (备注:代理服务器与服务器之间是非同源,但不存在跨域问题,是因为服务器之间采用的是http请求,而不是ajax技术)
五.配置代理服务器:
- nginx (相对繁琐,且需要一定的后端知识)
- proxy:(相对简单,熟悉一定的webpack配置即可) 配置单个代理:
// vue.config.js/webpack.config.js
// 优点:配置简单
// 缺点:不能灵活控制请求是否走代理,因为都会走代理
module.exports={
devServer:{
proxy:'http://xxx.xxx.xxx:5000'
}
}
复制代码
配置多个代理:
// vue.config.js/webpack.config.js
// 优点:可以配置多个代理,且可灵活控制请求是否走代理
// 缺点:配置繁琐,发起代理请求时必须加上配置好的前缀
module.exports={
devServer:{
proxy:{
'/api01':{
target:'http://xxx.xxx.xxx:5000',
changeOrigin:true,
// 重写请求,根据接口详情,判断是否需要
pathRewrite:{
'^/api01':''
}
},
'/api02':{
target:'http://xxx.xxx.xxx:5001',
changeOrigin:true,
// 重写请求,根据接口详情,判断是否需要
pathRewrite:{
'^/api02':''
}
}
}
}
}
// changeOrigin设置为true时,服务器收到的请求头的host与服务器地址相同
// changeOrigin设置为false时,服务器收到的请求头的host与前端地址相同
复制代码