使用所有方法发送预检请求 [英] Preflight request is sent with all methods

问题描述

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

My FE application is using API from different domain. I know that it should trigger CORS, but as I understood it shouldn't create preflight for every request.

根据 docs ，我不应该有 GET 的预检请求方法。

According to docs, I shouldn't have preflight request for GET method.

 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，我发现它很奇怪（根据文档说的那样）。

However, every request that I'm sending, has preflight (OPTIONS) request, no matter if it's GET or POST, and I find it strange (according to what docs said).

我设置了一些标题（我用 withCredentials：true 发送它），但我没有看到它应该是问题：

I set some headers (and I'm sending it with withCredentials: true), but I don't see that it should be the issue:

  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);

我错过了什么？

推荐答案

请参阅 https：// developer .mozilla.org / zh-CN / docs / Web / HTTP / Access_control_CORS #Simple_requests

即使对于GET请求，内容的唯一允许值 - 简单请求中的类型标题是 application / x-www-form-urlencoded ， multipart / form-data ，以及文本/纯。任何其他Content-Type值都会触发浏览器进行预检。

Even for GET requests, the only allowed values for the Content-Type header in a simple request are application/x-www-form-urlencoded, multipart/form-data, and text/plain. Any other Content-Type value will trigger browsers to do a preflight.

这是因为Fetch规范（定义了CORS行为）指定了它所谓的 CORS-safelisted request-header ，它定义为以下之一：

That follows from the fact the Fetch spec (which defines CORS behavior) specifies what it calls a CORS-safelisted request-header, which it defines as one of:

• 接受


• 接受语言


• 内容 - 语言


• Content-Type ，其值经解析后，其MIME类型（忽略参数）为 application / x-www -form-urlencoded ， multipart / form-data ，或 text / plain

• Accept
• Accept-Language
• Content-Language
• Content-Type and whose value, once parsed, has a MIME type (ignoring parameters) that is application/x-www-form-urlencoded, multipart/form-data, or text/plain

任何请求 - 包括任何GET请求 - 包含不是 CORS-safelisted request-header 触发器的标头预检。

Any request—including any GET request—that contains a header that’s not a CORS-safelisted request-header triggers a preflight.

为了使这一切更加清晰，我更新了关于CORS简单请求和关于CORS预检请求的MDN文档（它比上面描述的稍微复杂一些，但实际上是什么以上就此问题的上下文而言。）

To help make all this more clear, I updated the MDN documentation about CORS "simple requests" and the MDN documentation about CORS preflighted requests (it’s slightly more complicated than what’s described above, actually—but what’s above suffices for the context of this question).

请注意，WebKit / Safari对其中允许的值设置了额外的限制接受，接受语言和内容语言标题。

Note that WebKit/Safari places additional restrictions on the values allowed in the Accept, Accept-Language, and Content-Language headers.

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

If any of those headers have "non-standard" values, WebKit/Safari will do a preflight.

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

As far as what WebKit/Safari considers "non-standard" values for those headers, that’s not really documented except in the following WebKit bugs:

• 需要预检非标准CORS安全请求标头接受，接受语言和内容-Language


• 允许逗号接受简单CORS的接受语言和内容语言请求标题


• 在简单的CORS请求中切换到限制接受标头的黑名单模型

• Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language
• Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS
• Switch to a blacklist model for restricted Accept headers in simple CORS requests

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

No other browsers implement those extra restrictions, because they’re not part of the spec. They were unilaterally added to WebKit without any discussion with the spec editor or other browsers.

这篇关于使用所有方法发送预检请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！