概述

  当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。

  出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。例如,XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非使用CORS头文件。

  跨域资源共享( CORS )机制允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行。

跨域资源共享( CORS )

  CORS Headers

  • Access-Control-Allow-Origin
    Indicates whether the response can be shared.
  • Access-Control-Allow-Credentials
    Indicates whether or not the response to the request can be exposed when the credentials flag is true.
  • Access-Control-Allow-Headers
    Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.
  • Access-Control-Allow-Methods
    Specifies the method or methods allowed when accessing the resource in response to a preflight request.
  • Access-Control-Expose-Headers
    Indicates which headers can be exposed as part of the response by listing their names.
  • Access-Control-Max-Age
    Indicates how long the results of a preflight request can be cached.
  • Access-Control-Request-Headers
    Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.
  • Access-Control-Request-Method
    Used when issuing a preflight request to let the server know which HTTP method will be used when the actual request is made.
  • Origin
    Indicates where a fetch originates from.

简单请求

  某些请求不会触发 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

预检请求

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

  当请求满足下述任一条件时,即应首先发送预检请求:

  • 使用了下面任一 HTTP 方法:
    PUT DELETE CONNECT OPTIONS TRACE PATCH
  • 人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。
  • Content-Type 的值不属于上述值之一