CORS跨域原理_cors响应204-优快云博客

本文详细介绍了CORS跨域的工作原理和技术细节，包括浏览器自动处理的CORS通信流程、请求和响应头部字段的作用、预检请求的过程及如何配置服务器端以支持跨域访问。此外还对比了CORS与JSONP的不同之处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CORS跨域

环境：IE10以上及其他浏览器
1. 整个CORS通信过程，都是浏览器自动完成，客户端不用设置，服务器段需要设置Access-Control-Allow-Origin

请求
GET /cors HTTP/1.1
Origin: http://xxx.xxx.com
Host: api.millions.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

响应
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:https://xxx.xxx.com

对于非简单请求put和delete，Content-Type为application/json，浏览器会先发送options的预检（preflight）请求
预捡请求

Request Method:OPTIONS
Accept-Language:zh-CN,en;q=0.8,zh;q=0.6
Access-Control-Request-Method:GET
Origin:https://xxx.xxx.com

预捡响应
Request Method:OPTIONS
Status Code:204 No Content
Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin:https://xxx-xxx.com

服务器短设置允许跨域后，response中会返回Access-Control-Allow-Origin，否则会报错，可用XMLHttpRequest的onerror捕获
- 几个注意的字段
Origin 请求源，浏览器自动添加
Access-Control-Allow-Credentials 布尔值，请求中是否包含cookie

与JSONP的比较

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
- 对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。
这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“*”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http://yoo.example，则请求将成功执行。

HTTP 响应首部字段

允许客户端访问更多的响应头信息：Access-Control-Expose-Headers
在跨域访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。
Access-Control-Expose-Headers 头让服务器把允许浏览器访问的头放入白名单，例如：
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
这样浏览器就能够通过getResponseHeader访问X-My-Custom-Header和 X-Another-Custom-Header 响应头了。
指定了preflight请求的结果能够被缓存多久

- Access-Control-Max-Age: 86400

允许浏览器读取 response
Access-Control-Allow-Credentials 头指定了当浏览器的credentials设置为true时是允许浏览器读取response的内容。
实际请求中允许携带的首部字段。
Access-Control-Allow-Headers首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。

HTTP 请求首部字段（这些首部字段无须手动设置

Origin 首部字段表明预检请求或实际请求的源站。它不包含任何路径信息，只是服务器名称。注意，不管是否为跨域请求，ORIGIN 字段总是被发送。
Origin: <origin>
Access-Control-Request-Method
Access-Control-Request-Method 首部字段用于预检请求。其作用是，将实际请求所使用的 HTTP 方法告诉服务器。
Access-Control-Request-Headers
Access-Control-Request-Headers 首部字段用于预检请求。其作用是，将实际请求所携带的首部字段告诉服务器。

Access-Control-Request-Headers: <field-name>[, <field-name>]