关于跨域的深刻理解

跨域资源共享（cros）是一种机制它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不一样源服务器上的指定的资源。当一个资源从与该资源自己所在的服务器不一样的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

（即便是同一个域不一样端口的请求也算是跨域行为）

参考资料 MDN相关资料参考 、 阮老师博客资料参考

实际场景

这里，咱们使用三个场景来解释跨域资源共享机制的工做原理。这些例子都使用 XMLHttpRequest 对象。（对于fetch请求也是大体相同的机理）

简单请求

某些请求不会触发 CORS 预检请求。本文称这样的请求为“简单请求”，请注意，该术语并不属于 Fetch （其中定义了 CORS）规范。若请求知足全部下述条件，则该请求可视为“简单请求”：

• 使用下列方法之一：
  • GET
  • HEAD
  • POST
• Fetch 规范定义了对 CORS 安全的首部字段集合，不得人为设置该集合以外的其余首部字段。该集合为：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type （须要注意额外的限制）
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
• Content-Type 的值仅限于下列三者之一：
  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded
• 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可使用 XMLHttpRequest.upload 属性访问。
• 请求中没有使用 ReadableStream 对象。

预检请求

与前述简单请求不一样，“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否容许该实际请求。"预检请求“的使用，能够避免跨域请求对服务器的用户数据产生未预期的影响。

当请求知足下述任一条件时，即应首先发送预检请求：

• 使用了下面任一 HTTP 方法：
  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE
  • PATCH
• 人为设置了对 CORS 安全的首部字段集合以外的其余首部字段。该集合为：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type (须要注意额外的限制)
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
• Content-Type 的值不属于下列之一:
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
• 请求中的XMLHttpRequestUpload 对象注册了任意多个事件监听器。
• 请求中使用了ReadableStream对象。

附带身份凭证的请求

Fetch 与 CORS 的一个有趣的特性是，能够基于 HTTP cookies 和 HTTP 认证信息发送身份凭证。通常而言，对于跨域 XMLHttpRequest 或 Fetch 请求，浏览器不会发送身份凭证信息。若是要发送凭证信息，须要设置 XMLHttpRequest 的某个特殊标志位。

1. 请求配置需添加 withCredentials 标志设置为 true
2. 服务器端的响应中设置响应头 Access-Control-Allow-Credentials: true

!!!!

附带身份凭证的请求与通配符

对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。

这是由于请求的首部中携带了 Cookie 信息，若是 Access-Control-Allow-Origin 的值为“*”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 foo.example，则请求将成功执行。

另外，响应首部中也携带了 Set-Cookie 字段，尝试对 Cookie 进行修改。若是操做失败，将会抛出异常。

响应首部字段

响应首部的字段是须要手动设置的。

Access-Control-Allow-Origin

响应首部中能够携带一个 Access-Control-Allow-Origin 字段，其语法以下: Access-Control-Allow-Origin: <origin> | *

Access-Control-Expose-Headers

Access-Control-Expose-Headers 头让服务器把容许浏览器访问的头放入白名单，例如： Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

Access-Control-Max-Age

Access-Control-Max-Age 头指定了preflight请求的结果可以被缓存多久 Access-Control-Max-Age: <delta-seconds>

Access-Control-Allow-Credentials

Access-Control-Allow-Credentials 头指定了当浏览器的credentials设置为true时是否容许浏览器读取response的内容。当用在对preflight预检测请求的响应中时，它指定了实际的请求是否可使用credentials。请注意：简单 GET 请求不会被预检；若是对此类请求的响应中不包含该字段，这个响应将被忽略掉，而且浏览器也不会将相应内容返回给网页 Access-Control-Allow-Credentials: true

Access-Control-Allow-Methods

Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所容许使用的 HTTP 方法。 Access-Control-Allow-Methods: <method>[, <method>]*

Access-Control-Allow-Headers

Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中容许携带的首部字段。 Access-Control-Allow-Headers: <field-name>[, <field-name>]*

HTTP 请求首部字段

本节列出了可用于发起跨域请求的首部字段。请注意，这些首部字段无须手动设置。 当开发者使用 XMLHttpRequest 对象发起跨域请求时，它们已经被设置就绪。

Origin

Origin 首部字段代表预检请求或实际请求的源站 Origin: <origin>

Access-Control-Request-Method

Access-Control-Request-Method 首部字段用于预检请求。其做用是，将实际请求所使用的 HTTP 方法告诉服务器。 Access-Control-Request-Method: <method>

Access-Control-Request-Headers

Access-Control-Request-Headers 首部字段用于预检请求。其做用是，将实际请求所携带的首部字段告诉服务器。 Access-Control-Request-Headers: <field-name>[, <field-name>]*

福利放送 免费分享【精品付费课程透析HTTP协议】

网盘地址： pan.baidu.com/s/1aMOpoed8…

扫描下方二维码关注公众号 【前端每天见】 获取课程提取码