使用JSONP解决同源限制问题

Ajax请求限制
Ajax只能向自己的服务器发送请求,比如现在有一个A网站,有一个B网站,A网站中的HTML文件只能向B网站中发送Ajax请求,但是A网站是不能向B网站发送Ajax请求,同理,B网站也不能向A网站发送Ajax请求。

同源
如果两个页面拥有相同的协议,域名和端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源。

同源政策的目的
同源政策是为了保证用户信息的安全,防止恶意网站窃取数据,最初的同源政策是指A网站在客户端设置的cookie,B网站是不能访问的。
随着互联网发展,同源政策也越来越严格,在不同源的情况下,其中有一项规定就是无法向非同源地址发送Ajax请求,如果请求,浏览器就会报错。

JSONP解决同源限制问题
jsonp是json with padding 的缩写,它不属于Ajax请求,但它可以模拟Ajax请求。
1.将不同源的服务器端请求地址写在script标签的src标签中

<script src='www.example.com'></script>

2.服务器响应数据必须是一个函数的调用,真正要发送给客户端的数据需要作为函数调用的参数。

const data = 'fn({name:'张三',age:'20'})';
res.send(data);

3.在客户端全局作用域下定义函数fn

function fn(data) {
}

4.在fn函数内部对服务器端返回的数据进行处理

function fn(data) {
	console.log(data);
}
上一篇:在一个事件中添加多个ajax


下一篇:jsonp