解决跨域访问,最常用有三种办法
- CORS
- jsonp
- 代理
CORS
cross origin resource share,跨资源共享
- 主要是站在服务端的角度,对外开放访问权限
- 要求,我们需要有权限去编写(修改)服务端的代码
- 同时,在浏览器端,不用写任何代码
注意:
Cors插件不是真正的解决方案,只是一个临时,在开发的时候,可以用一用而已。
项目上线的时候,不可能使用这种方案。
jsonp
json with packing,json的一个包装,是一种协议,协议用来传递数据的。是途径。好比是传递情报的方式。
原理:
因为script标签 本身是可以进行跨域访问的,我们利用这一点,创建一个方法,动态的去添加一个script标签,并指定url,当请求成功,服务端返回一个js字符串,作为script标签内容,可以直接被js执行
我们可以通过在浏览器端定义一个函数callback,传递给服务端,服务端可以获取这个callback,并把要返回的数据,作为这个callback的参数,返回callback,
function addScript(url) {
let script = docunment.creatElement('script');
script.src = url;
documnet.body.appendChild(script);
}
function cb(res){
console.log(res);
}
addScript('网址?callback=cb');
注意
要实现jsonp,在服务端和浏览器端都需要编写相应的代码。
Jsopn的原理是基于script标签,它==只能实现get跨域==,不能实现post跨域。[注意]
jsonp和json的区别,
- Json,javascript object notation,js对象表示,是一个种格式,本质是字符串。是数据。好比是情报。
- Jsonp,json with packing,json的一个包装,是一种协议,协议用来传递数据的。是途径。好比是传递情报的方式。
代理
因为cros和jsonp都是需要后端有配合代码,所以当后端没有配合代码的时候,我们可以自己写一个后端,然后替前端去请求数据
我们可以把要请求的接口作为数据发送给 作为代理的后端
$.ajax({
url: '/daili',
type: 'get',
data: '接口地址',
datatype: 'json',
seccess: function(res){
console.log(res);
}
})
接着后端获取到发送的数据
app.get('/daili', (req, res) => {
let url = req.query.url;
http.get(url, (response) => {
let data = '';
response.on('data', (chunk) => {
data += chunk;
});
response.on('end', () => {
res.json(JSON.parse(data));
})
})
})