jsonp

跨域

Posted by Zxd on January 03, 2017

跨域和跨域的几种方式

一直想总结下有关跨域的知识点,趁着现在有点时间,敲敲写写也是不错的.

跨域

跨域是指不同域名之间的相互访问.

同源策略

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同.

因为浏览器同源策略的限制,本域的js不能操作其他域下的js,对象或数据.这跟浏览器有关,浏览器拦住了发送的消息,而与服务端无关.

跨域的方式

理解了跨域和同源策略后,我们来看看有哪些方式可以解决跨域的,这里搜集了网上一些资料,再自己总结了一下.如果有不对的地方欢迎指出 :)

1. jsonp

jsonp(json with padding)其本质是利用了<script src=""></script>标签不受同源策略限制.由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。这也是前端解决跨域问题最常见的方法.

注意

  • 只能使用get方法(因为script标签只能是get)
  • 需要服务端的跨域支持(预先设定callback回调函数)

比如,在服务端(node.js)做一层包装res.send(${req.query.callback}),添加一个函数,然后前端Ajax请求返回这个函数的调用.jsonp的优点是简单,兼容性好.缺点是只支持GET请求.

jsonp的产生
  1. Ajax直接请求普通文件存在跨域无权访问的问题
  2. 我们在调用js文件的时候不受跨域的影响,如引入jquery框架时.
  3. 凡是拥有src这个属性的标签都可以跨域.如<script>,<img>,<iframe>
  4. 如果想通过纯前端跨域访问服务端数据,只能把远程服务器中的数据装进js格式的文件里
  5. 而json又是一个轻量级的数据格式,且被原生js支持
  6. 所以为了方便客户端请求数据,逐渐形成了一种非正式的传输协议,即jsonp,该协议有个要点是允许用户传递一个callback参数给服务端

2. 服务端代理(Proxy)

网站A获取网站B上的资源内容,跨域方式分为B网站可控和B网站不可控,利用代理(proxy)这种方法实现跨域时,B网站不可控.

proxy原理

网站A将访问网站B的请求通过参数的形式发送给代理服务器(proxy),代理服务器收到请求后转而去访问网站B,然后将获取的信息再返回给网站A,形成一个数据请求回路.

1
2
A -->request-->  Proxy -->request--> B
A --<response<-- Proxy --response<-- B

其他一些跨域方式

  1. 同主域名下iframe控制document.domain跨域
  2. location.hash+iframe
  3. window.name+iframe
  4. 将数据通过js进行直接加载
  5. html5中的postMessage
  6. 利用CORS进行跨域
  7. web sockets

暂时先总结这么多,代码后期再补上吧~睡觉睡觉,晚安.