XM的小窝


 

AJAX同源策略与解决跨域请求问题

AJAX同源策略

同源策略(same-Origin-Policy)最早由Netscape公司出的,是浏览器的一种安全策略

同源:协议,域名,端口号必须完全相同

违背同源策略就是跨域

如何解决跨域问题

CORS跨域资源共享

CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和 post请求。跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明哪些源站通过浏览器有权限访问

CORS是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行。

只需要在服务端请求内加上这句话(稍暴力)

response.setHeader('Access-Control-Allow-Origin', '*'); //设置允许跨域访问

JSONP

JSONP是什么

JSONP(ISON with Padding),是一个非官方的跨域解决方案,也不知道是哪个大聪明想出来的(,不过只支持get 请求

JSONP怎么工作的?

在网页有一些标签天生具有跨域能力,比如: img link iframe script .JSONP就是利用script标签的跨域能力来发送请求的。

JSONP的使用

  • 动态的创建一个script标签
  • 设置script的src,设置回调函数

分析一下,其实就是利用script标签的请求是可以随便跨域的,不会弹出警告,所以,我们需要请求的时候先创建一个script标签,然后直接把要请求的接口写在script标签内的src里面,然后使用回调函数获取到请求返回的值

但是,这样的话,接口返回的数据就必须是标准的js格式的代码,否则就会报错,所以JSONP只能用于GET请求上

前端代码:

document.querySelector('button').onclick = function() {
    //删除已存在的script
    document.querySelector('#get') && document.querySelector('#get').remove();
    //创建一个专用的script标签作为跳板
    let s = document.createElement('script');
    s.src = 'http://127.0.0.1:8000/jsonp';
    s.setAttribute('id', 'get');
    document.querySelector('body').appendChild(s);
};
//创建一个handle函数
function handle(data) {
    document.querySelector('p').innerHTML = data.name + " " + data.age
}

node端:

//曲线救国解决跨域问题
app.all('/jsonp', (request, response) => {
    const data1 = { name: "kano", age: 18 };
    //对象转换为字符串+模板字符串
    response.send(`handle(${JSON.stringify(data1)})`);
});
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注