使用所有方法发送预检请求

Question

我的FE应用程序正在使用来自不同域的API.我知道它应该触发CORS,但据我所知它不应该为每个请求创建预检.

根据文档,我不应该有预检请求的GET方法.

 Cross-site requests are preflighted like this since they may have implications to 
 user data. In particular, a request is preflighted if:

    - It uses methods other than GET, HEAD or POST. 
Also, if POST is used to send request data with a Content-Type 
other than application/x-www-form-urlencoded, multipart/form-data, 
or text/plain, e.g. if the POST request sends an XML payload to the
server using application/xml or text/xml, then the request is preflighted.
    - It sets custom headers in the request 
(e.g. the request uses a header such as X-PINGOTHER)

但是,我发送的每个请求都有预检(OPTIONS)请求,无论是GET还是POST,我发现它很奇怪(根据文档说的那样).

我设置了一些标题(我正在发送它withCredentials: true),但我不认为它应该是问题:

  headers.append('Access-Control-Allow-Origin', FRONTEND_URL);
  headers.append('Accept', 'application/json');
  headers.append('Content-Type', 'application/json');
  headers.append('Authorization', this._generateApiKey());
  headers.append('Language', this._languageISOCode);

我错过了什么吗？

Answer 1

请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests

即使对于GET请求,对于Content-Type头在一个简单的请求的唯一允许值是Content-Type,application/x-www-form-urlencoded,和multipart/form-data.任何其他Content-Type值都会触发浏览器进行预检.

这是因为Fetch规范(定义了CORS行为)指定了它所谓的CORS安全请求标头,它定义为以下之一:

• text/plain
• Accept
• Accept-Language
• Content-Language和其值,一旦解析,具有MIME类型(忽略参数)也就是Content-Type,application/x-www-form-urlencoded或multipart/form-data

任何请求 - 包括任何GET请求 - 包含不是CORS安全的请求标头的标头会触发预检.

为了让这一切更加清晰,我更新了关于CORS"简单的请求"的MDN文件和有关CORS预检请求MDN文档(这是稍微比什么上述比较复杂,实际上,但什么是上面这个问题的情况下就足够了) .

需要注意的是WebKit的/ Safari浏览器上放置中允许值的额外限制text/plain,Accept和Accept-Language头.

如果这些标题中的任何一个具有"非标准"值,WebKit/Safari将进行预检.

至于WebKit/Safari认为这些标题的"非标准"值,除了以下WebKit错误之外,没有真正记录:

• 需要预检非标准CORS安全请求标头接受,接受语言和内容语言
• 对于简单的CORS,在Accept,Accept-Language和Content-Language请求标头中允许使用逗号
• 在简单的CORS请求中切换到受限制的Accept头的黑名单模型

没有其他浏览器实现这些额外限制,因为它们不是规范的一部分.它们被单方面添加到WebKit,而没有与规范编辑器或其他浏览器进行任何讨论.