关于javascript:跨域解决方案

怎么分别跨域:

JSONP

利用了 script 标签可跨域的个性,在客户端定义一个回调函数(全局函数),申请服务端返回该回调函数的调用,并将服务端的数据以该回调函数参数的模式传递过去,而后该函数就被执行了
script,img,link,iframe不存在跨域申请限度

代码:

callback这个名字是定死了的,不能改

后端:后端返回f(‘你好’),刚好这个f函数在前端定义了,会立刻执行f(‘你好’),最初弹窗你好弹框

jquery的ajax办法实现JSONP

前端:

后盾:

后果:

申请:Jquery3410427…448148是jquery为咱们创立的全局函数,&前面接了一个变量_,_157…815是为了革除get申请的缓存

返回:

论断:
Jquery默认帮咱们发script申请
Jquery默认创立全局函数
Jquery默认执行全局函数时执行胜利回调函数

批改申请头-CORS跨域资源共享

前端:

后端:

毛病:
Access-Control-Allow-Origin写具体地址时只能写一个
Access-Control-Allow-Origin写时,就不再容许携带cookie(浏览器的机制,时携带cookie很不平安)

http proxy

应用webpack的devserver实现,实用于开发阶段调试:

ngnix反向代理


本地8080申请ngnix代理服务器8080,是同源的,不存在跨域限度
ngnix代理服务器8080再去申请真正的服务器5000,因为服务器与服务器之间通信不会有同源策略管制,同源策略管制只是浏览器的机制。

postMessage

html页面与页面之间的通信
1001/MESSAGE/A.html向1002/MESSAGE/B.html申请数据:

第13行,display:none是因为这个iframe只用来发申请,不展现在页面上
第17行contentWindow是iframe上的一个属性
第22行,ev.data是B页面返回的数据
能够在MDN上查问postMessage的用法:


第17行的ev.data是接管的A页面的数据
第19行的ev.origin是指A页面链接

后果:

WebSocket协定跨域

这种形式实质没有应用HTTP响应头,因而也没有跨域的限度
服务器端:

客户端:

document.domain+iframe

只能实现同一个主域,不同子域下的操作
即能够:v.qq.com向sports.qq.com发送

window.name+iframe

:1001/NAME/A.html:

第18行,第一次onload是页面初始化的时候,第二次是iframe.src被从新赋值后
:1001/NAME/proxy.html:

proxy.html页面就是一个空代理,只有两头代理proxy.html没有设置window.name,A.html接管到的还是B.html里的window.name

:1002/NAME/B.html:

后果:

location.hash+iframe



评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理