说说跨域

110 阅读2分钟

同源策略

浏览器故意设计的一个功能限制,只要在浏览器打开页面,就默认遵守同源策略

同源定义:

源:你在控制台输入window.origin或者location.origin可以得到当前的源

源 = 协议+域名+端口号

image.png 如果两个URL的协议,域名,端口号完全一致,那么这两个URL就是同源

同源策略:

  • 定义:不同源的页面之间,不准互相访问数据

  • 浏览器规定:如果JS运行在源A里,那么就只能获取源A的数据,不能获取源B的数据,即不允许跨域

  • 举栗子

假设新建Jack.com/index.html 引用了cdn.com/1.js

那么就说1.js就只能运行在源juck.com里

注意这跟cdn.com没有关系,虽然1.js从它那里下载

所以1.js就只能获取jack.com的数据

不能获取1.jack.com或者qq.com的数据

  • 注意:这是浏览器的功能,浏览器故意这么设计的

浏览器这么做的原因是?

为了保护用户隐私和数据安全,如果有浏览器不限制就是浏览器的bug.

缺点是很多时候前端需要访问另一个域的后端接口,会被浏览器阻止其获取响应

我们假设没有同源策略:

image.png 问题的根源:浏览器无法区分发送者

检查referer, HTTP 协议在请求(request)的头信息里面,设计了一个Referer字段,给出"引荐网页"的 URL

但是很多人并不知道要检查referer,所以需要浏览器强制不同页面不准互相访问数据

其他疑问:

image.png

现实中,往往需要做到跨域共享,面试官问:如何做到跨域?

解法一: CORS

CORS

突破浏览器限制的一个方法

应用场景:heike.com和jack.com都是我的网站,我想让他们可以互相访问,但浏览器默认不同源之间不能互相访问,现在该怎么办?

用CORS,浏览器说你想要共享数据需要提前声明,该怎么声明?具体语法是?

Access-Control-Allow-Origin:http://域名

image.png

具体看MDN文档: 跨源资源共享(CORS) - HTTP | MDN (mozilla.org)

但是IE不支持,于是有了第二种解法:JSONP

JSONP

IE6 7 8 9 不支持 CORS,所以没有CORS,怎么跨域?

记不记得我们可以随意访问JS,但JS又不是数据,我们让JS包含数据再引用不就行了...

步骤如下:

image.png

后续待补充,如何封装JSONP