在说跨域之前,首先需要了解的一个概念就是”同源策略“
。
<<<前端是我一辈子的信仰,写代码直到50岁>>>
关注微信公众号:web前端学习圈
回复关键词【CSDN】领取2020年最新web前端系统学习教程(视频+笔记+素材+源码+项目实战)全套整理约50G
另外公众号每天都会分享学习方法,知识干货,实战案例,面试技巧,经验分享等相关文章,关注web前端学习圈=关注5000+前端大牛
源=协议+域名+端口号。
如果两个url
的协议、域名、端口号完全一致,那么这两个url
就是同源的。
我们可以通过window.origin
或location.origin
得到当前源。
https://wang.com
https://ergou.com
//不同源,域名不一致(记住:只有完全一模一样才算同源)
http://wang.com/index.html
http://wang.com/server.php
//同源
localhost 调用 127.0.1
//不同源
复制代码
同源策略即:不同源之间的页面,不准互相访问数据。
浏览器规定:如果JS
运行在源A
里,那么就只能获取源A
的数据,不能获取源B
的数据,即不允许跨域。
假设 wang.com/index.html
引用了ergou.com/1.js
,那么就说1.js
运行在源wang.com
里
注意,这和ergou.com
没有关系,虽然1.js
是从它那里下载的.
所以1.js
就只能获取wang.com
的数据,这就是浏览器的功能,浏览器就是故意这样设计的。
之所以需要使用同源策略,就是为了保护用户的隐私。
以微信为例,源为 https://user.weixin.com
,假设当前用户已经登录,并且AJAX
请求 /friends.json
可以获取用户好友列表。
这个时候黑客来了,他把 https://user-winxin.com
分享给你,实际上这是一个钓鱼网站,你点开这个网页,这个网页也请求你的好友列表 https://user.weixin.com/friends.json。
请问,这个时候你的好友列表是不是就被黑客给偷走了?
之所以会出现这个问题,其根源就在于无法区分发送者。
微信里面的JS
和黑客的JS
发送到请求几乎没有区别(referer
区别)
但是如果后台的开发者没有检查 referer
,那么就完全没有区别。
所以,如果没有同源策略,任何页面都能偷走微信里面的数据,甚至是支付宝里面的余额。
有的小伙伴可能会问,既然referer
有区别,那检查referer
不就好了?
安全原则:安全链条上的强度取决于安全链条上最弱的一环。
同时,万一这个网站的后端开发者是一个傻叉呢?
所以浏览器应该主动预防这种偷数据的行为。
总之,为了保护用户的隐私,浏览器设置了严格的同源策略。
如果浏览器不限制跨域,一定是这个浏览器出现了bug
。
跨域,即浏览器试图执行其他网站的脚本。但是由于同源策略的限制,导致我们无法实现跨域。
为什么a.wang.com
访问wang.com
也算跨域?
因为历史上,出现过不同的公司共用域名,a.wang.com
和wang.com
不一定是同一个网站,浏览器谨慎起见,认为这是不同的源。
为什么不同端口也算跨域?
原因同上,一个端口一个公司的情况也不是没有的。
记住:安全链条的强度取决于最弱的一环,所有和安全相关的问题都要谨慎对待。
为什么两个网站的IP
一样,也算跨域?
原因同上,因为IP
也是可以共用的。
为什么可以跨域使用CSS
、JS
和图片等?
同源策略限制的是数据访问,我们引用CSS
、JS
和图片的时候,其实并不知道其内容,我们只是在引用。
CORS
的全称是"跨域资源共享"(Cross-origin resource sharing)。 它允许浏览器向跨源服务器,发出XMLHttpRequest
请求,从而克服了AJAX
只能同源使用的限制。
如果wang.com
和ergou.com
这两个网站都是我的,我就是想让wang.com
去访问ergou.com
里面的数据应该怎么办呢?
只需要wang.com
在响应头里写ergou.com
可以访问即可。这就是CORS
。
实现CORS
通信的关键是服务器。只要服务器实现了CORS
接口,就可以跨源通信。
CORS
跨域分为两种请求,一种是简单请求,另外一种就是复杂请求。
只要满足以下条件的就是简单请求:
HEAD
、POST
或者 GET
Accept
、Accept-Language
、 Content-Language
、 Last-Event-ID
、 Content-Type
(限于三个值:application/x-www-form-urlencoded
、multipart/form-data
、text/plain
)简单请求的实现具体来说就是在信息头中加入一个Origin
字段:
GET /cors HTTP/1.1
Origin: http://wang.com
Host: api.ergou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0
...
复制代码
Origin
的作用就是用来说明本次请求来自哪个源,服务器会根据Origin
的值来判断是否接受本次请求。
如果Origin
所表示的源不被服务器接受,即浏览器发现回应的信息头中没有Access-Control-Allow-Origin
字段,就会自动抛出一个错误。
注意:这种错误是无法通过状态码识别的,这也是通过CORS
实现跨域请求的一个弊端。
如果Origin
所表示的源被服务器端所接受,那么服务器就会返回如下响应:
Access-Control-Allow-Origin: http://api.ergou.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
复制代码
Access-Control-Allow-Origin
:该字段是必须的。它的值要么是请求时Origin
字段的值,要么是一个*
,表示接受任意域名的请求Access-Control-Allow-Credentials
: 该字段可选。它的值是一个布尔值,表示是否允许发送Cookie
。默认情况下,Cookie
不包括在CORS
请求之中。设为true
,即表示服务器明确许可,Cookie
可以包含在请求中,一起发给服务器。这个值也只能设为true
,如果服务器不要浏览器发送Cookie
,删除该字段即可。(注意:如果要发送cookie
,不仅要进行上述的设置,还要在AJAX
请求中设置withCredentials
属性)Access-Control-Expose-Headers
:该字段可选。CORS
请求时,XMLHttpRequest
对象的getResponseHeader()
方法只能拿到6个基本字段:Cache-Control
、Content-Language
、Content-Type
、Expires
、Last-Modified
、Pragma
。如果想拿到其他字段,就必须在Access-Control-Expose-Headers
里面指定。所谓复杂请求,即不满足上述条件的请求就是复杂请求。
比如请求的方法是PUT
或DELETE
,或者Content-Type
字段的类型是application/json
。
复杂请求首先会发起一个预检请求,该请求是 option
方法的,通过该请求来知道服务端是否允许跨域请求。
var url = 'http://api.wang.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
复制代码
上面的请求就是一个复杂请求,当浏览器发现这是一个复杂请求之后,就会主动发出一个预检请求,询问服务器是否允许本次请求。
服务器收到预检请求之后,检查了Origin
、Access-Control-Request-Method
和Access-Control-Request-Headers
字段以后,确认允许跨源请求,才会做出相应的回应。
Access-Control-Allow-Origin: http://api.wang.com
Content-Type: text/html; charset=utf-8
复制代码
不支持IE8/9
,如果要在IE8/9
使用CORS
跨域需要使用XDomainRequest
对象来支持CORS
。
我们在跨域的时候由于当前的浏览器不支持 CORS
或者因为某些条件不支持 CORS
,我们必须使用另外一种方式来跨域,于是我们就请求一个 JS
文件,这个 JS
文件会执行一个回调,回调里面就有我们需要的数据。
let script = document.createElement('script');
script.src = 'http://www.wang.cn/login?username=wang&callback=callback';
document.body.appendChild(script);
function callback(res) {
console.log(res);
}
复制代码
回调的名字是可以随机生成的的一个随机数,我们把这个名字当成 callback
的参数传给后台,后台会把这个函数再次返回给我们并执行
ie
script
标签,所以读不到 ajax
那么精确的状态,不知道状态码是什么,也不知道响应头是什么,它只知道成功和失败。post
(因为是 script
标签,所以只支持 get
请求)告诫自己,即使再累也不要忘记学习,成功没有捷径可走,只有一步接着一步走下去。 共勉!
文章中如有不对的地方,欢迎小伙伴们多多指正。
谢谢大家~