前端中的跨域

同源策略?

同源策略/SOP(Same origin policy)是一种约定,属于浏览器的一个安全功能。不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

基于这个策略,有以下几种限制:

  • cookie:js不能读取其它域下的cookie,否则你的登录信息,安全信息就泄露了;
  • Storage和IndexDB: 道理同cookie;
  • DOM 和 JS 对象;
  • AJAX请求:不能发送另一个域下的Ajax请求;

什么是跨域

如果违反了同源策略,则就会产生跨域。哪些情况才算是跨域呢?

  1. 页面域名不同: http://a.com 和 http://b.com 不同源
  2. 父级域名相同,子域名不同: http://a.c.com 和 http://b.c.com 不同源
  3. 端口不同:http://a.com:8888 和 http://a.com:8000 不同源
  4. 协议不同: http://a.com 和 https://a.com 不同源

解决跨域的方式

jsonp跨域

jsonp跨域的原理很简单,借鉴了html中script脚本可以来自不同域的原理。想一想是不是script中的src属性值可以设置为来自第三方的js。
但是这也限制了jsonp只能做GET请求,同时需要后端做配合。

举例说明:

有一个跨域的请求: http://c.com/getInfo?id=xxx。因为同源策略的限制,我们通过Ajax无法操作。那么使用jsonp,该如何绕过跨域的限制呢?直接看代码:

你可能感兴趣的:(cross-origin,跨域,同源策略,jsonp)