使用带 Content-Type 的 fetch 时出现 CORS 错误

Question

我正在尝试从 FireFox 中的不同域向 REST Web 服务发送 POST 请求。为此，我正在使用 JavaScript“获取”功能。我在 IIS 中托管 REST Web 服务。在 JavaScript.

中添加“Content-Type”header 之前它工作正常

FireFox 控制台中的 CORS 错误

请注意，如果我在控制台中启用 XHR，那么我可以看到将 fetch 与“Content-Type”一起使用会导致 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));

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

REST 网络服务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”header“application/json”，REST Web 服务将无法工作。我该如何解决这些错误？

旁注

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

Answer 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>

使用带 Content-Type 的 fetch 时出现 CORS 错误

CORS error when using fetch with Content-Type

javascript

iis

wcf

fetch

cors