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

我正在尝试从 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.

JavaScript 出现 CORS 错误

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

我正在使用“凭据：”包括“”，因为 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，使示例更容易（因为不需要证书），但它也会以纯文本形式发送基本身份验证的凭据

丹尼尔·A·怀特（Daniel A. White）提到的问题中所选择的答案是解决方案，尽管略有修改。如何为WCF服务添加跨域支持 https://stackoverflow.com/questions/14047754/how-to-add-cross-domain-support-to-wcf-service.

边注

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

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

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

全局.asax.cs

我还将 Global.asax.cs 文件添加到 Web 服务中。但我没有在其中添加任何“Access-Control-Allow-Headers”，因为它似乎推翻了 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();
        }
    }

网页配置

我也把这个削减到最低限度（确保您已 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>