将 fetch 与 Content-Type 一起使用时出现 CORS 错误 [重复]

Posted 2023-03-04

【中文标题】将 fetch 与 Content-Type 一起使用时出现 CORS 错误 [重复]

【英文标题】：CORS error when using fetch with Content-Type [duplicate]

【发布时间】：2020-10-09 16:04:40

【问题描述】：

我正在尝试从 FireFox 中的不同域向 REST Web 服务发送 POST 请求。我正在为此使用 javascript“获取”功能。我在 IIS 中托管 REST Web 服务。在我在 JavaScript 中添加“Content-Type”标头之前它工作正常。

FireFox 控制台中的 CORS 错误

请注意，如果我在控制台中启用 XHR，那么我可以看到使用带有“Content-Type”的 fetch 会导致 OPTIONS 请求。但是，不使用“Content-Type”会导致 POST 请求。如文档所述，因此 fetch 正在触发预检请求。这些是错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example.com/Service.svc/Request. (Reason: CORS preflight response did not succeed).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example.com/Service.svc/Request. (Reason: CORS request did not succeed).
TypeError: NetworkError when attempting to fetch resource.

出现 CORS 错误的 JavaScript

var body = 'ID:2, Name:"test reqx"';
var url = "http://example.com/Service.svc/Request";
var init = credentials:"include", method:"POST", headers:"Content-Type":"application/json","Accept":"application/json", body:body;
fetch(url,init)
    .then(response => response.text())
    .then(data => console.log(data));

JavaScript 没有 CORS 错误，但也没有 Content-Type

var body = 'ID:2, Name:"test reqx"';
var url = "http://example.com/Service.svc/Request";
var init = credentials:"include", method:"POST", headers:"Accept":"application/json", body:body;
fetch(url,init)
    .then(response => response.text())
    .then(data => console.log(data));

我正在使用 'credentials:"include"'，因为 REST Web 服务配置了基本身份验证。

REST Web 服务 web.config（注意不同的域）

我添加了一些 CORS 配置，以使其他请求在 FireFox 中跨域工作。但是，我找不到允许 Content-Type 的正确配置：

<configuration>
    ...
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="http://example.net" />
          <add name="Access-Control-Allow-Methods" value="OPTIONS,POST"/>
          <add name="Access-Control-Allow-Credentials" value="true" />
          <add name="Access-Control-Allow-Headers" value="Content-Type"/>
        </customHeaders>
      </httpProtocol>
      ...
    </system.webServer>
    ...
</configuration>

如果没有“Content-Type”标头“application/json”，REST Web 服务将无法工作。我该如何解决这些错误？

旁注

使用 HTTP 而不是 HTTPS，使示例更容易（因为不需要证书），但它也以纯文本形式发送基本身份验证的凭据

【问题讨论】：

如果有帮助，请检查。 ***.com/questions/43759938/…

尝试将 CORS 插件添加到 chrome 并检查它是否返回响应，然后您可能需要更改一些标头值，否则代码更改

@Nishant 对 OPs 应用程序的用户没有帮助。

@symbiont 我看到你在使用 wcf - 你是否将它配置为响应 OPTIONS 请求？如果返回错误响应代码，则自定义标头内容不足。

@symbiont ***.com/questions/14047754/…

【参考方案1】：

在 Daniel A. White 提到的问题中，选择的答案是解决方案，尽管略有修改。 How to add cross domain support to WCF service.

旁注

当 OPTIONS 调用尚未修复时，我注意到对它的不同响应：

405 方法不允许：在 IIS 中使用匿名身份验证 401 未经授权：在 IIS 中使用基本身份验证 但正如丹尼尔指出的那样，两种情况下的 CORS 错误都是相同的

这就是我修改 WCF REST Web 服务并消除 CORS 错误的方式：

Global.asax.cs

我还将 Global.asax.cs 文件添加到 Web 服务中。但我没有写在那里添加任何标题，因为它似乎推翻了 web.config。所以决定将其削减到最低限度：

    protected void Application_BeginRequest(object sender, EventArgs e)
    
        // prevent 401 unauthorized response to CORS preflight check
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        
            HttpContext.Current.Response.End();
        
    

Web.config

我也将其减少到最低限度（确保您已 runAllManagedModulesForAllRequests="true"）

<configuration>
  ...
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    ...
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://example.net" />
        <add name="Access-Control-Allow-Credentials" value="true" />
        <add name="Access-Control-Allow-Headers" value="Content-Type"/>
      </customHeaders>
    </httpProtocol>
    ...
  </system.webServer>
  ...
</configuration>