CORS介绍
跨域资源共享向来都是热门的需求,我们可以使用 CORS 来快速实现 跨域访问,只需要在服务端进行授权即可,无需在前端添加额外的设置
简单说,CORS是一种访问机制,英文全称: Cross-Origin Resource Sharing,即我们说的跨域资源共享。当一个资源从与该资源本身所在服务器不同的域或端口请求一个资源时,资源会发起一个跨域HTTP请求。比如,在一个域名下的网页中,调用另一个域名中的资源。
CORS的工作原理
CORS 实现跨域访问并不是一蹴而就的,需要借助浏览器的支持,从原理题图我们可以看到,简单的请求(通常指 GET/POST/HEAD
方式,并没有去增加额外的请求头信息) 直接创建了跨域请求的 XMLHttpRequest
对象,而非简单请求(那种对服务器有特殊要求的请求,比如请求方法是 PUT
或DELETE
,或者 Content-Type
字段的类型是 application/json
) 则要求先发送一个 “预检” 请求,待服务器批准后才能真正发起跨域访问请求。
简单请求
下面分析摘自 阮一峰的 跨域资源共享 CORS 详解
对于简单请求 (GET/POST/HEAD
,浏览器直接发出 CORS
请求,具体来说,就是在头信息之中,增加一个 Origin
字段。如下图所示:
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
上面的 Origin
字段用来说明,本次请求来自哪个源(协议+域名+端口)。服务器根据这个值,决定是否同意这次请求。
如果 Origin
指定的源,不在许可范围内,服务器会返回一个正常的 HTTP响应。浏览器发现,这个回应的头信息没有包含 Access-Control-Allow-Origin
字段,就知道错了,从而抛出一个错误,被 XMLHttpRequest
的 onerror
回调函数捕获。
如果 Origin
指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access