在 WebAPI 上启用 CORS，Chrome 和 FF 仍然不起作用

Posted 2023-03-04

【中文标题】在 WebAPI 上启用 CORS，Chrome 和 FF 仍然不起作用

【英文标题】：CORS Enabled On WebAPI, Chrome and FF still dont work

【发布时间】：2017-02-10 20:14:54

【问题描述】：

我在 webApi 上启用了 CORS

var corsAttr = new EnableCorsAttribute("http://localhost:14054", "*", "*") SupportsCredentials = true;
            config.EnableCors(corsAttr);

但是当我从 FF 进行 Web 项目时，我仍然收到错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:28821/Authenticate. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).1(unknown)

这就是我在 chrome 中得到的

XMLHttpRequest cannot load http://localhost:28821/Authenticate. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:14054' is therefore not allowed access.

当在 Edge 或 IE 中做同样的事情时它会起作用。我做了一堆阅读，但不知道如何停止飞行前停止，但我想我在某处读到 chrome & FF 也包括端口号。

无论哪种方式，我都很生气和恼火，谁能告诉我我做错了什么。

编辑 另一件事是这是我已经发布的公共端点，并且能够使用移动应用程序来使用 api 就好了。这是在我开始开发 Web 应用程序之前。

编辑

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE, PATCH" />
    <add name="Access-Control-Allow-Headers" value="authorization,accept,content-type,origin,cache-control,x-requested-with" />
    <add name="Access-Control-Expose-Headers" value="x-sf3-api-version" />
  </customHeaders>
</httpProtocol>

这是web配置，上面是startup.register()中的enablecors()

它不是 OAuth 或身份验证逻辑，因为它适用于邮递员并适用于移动设备

【问题讨论】：

我也遇到过这种问题，你在创建webapi项目时选择了什么认证？

请告诉我们您正在使用的 apicontroller 和您的 WebApiConfig。

现在我正在尝试进行身份验证，所以直接进入我的誓言逻辑。

也许这与您实现身份验证的方式有关

同意 bsoulier，您需要向我们展示您的 myoath 逻辑，以及您的 webapiconfig 和 apicontroller，以便我们能够提供帮助。

【参考方案1】：

当我们通过 AJAX 调用受 NTLM 保护的 REST 端点时，我们在自己的项目中遇到了类似的问题 - Chrome 报告了一个 CORS 错误，但 IE/Edge 工作正常。

这里有一些提示可能有助于深入了解它。

我建议下载 Telerik Fiddler，它可以让您看到通过网络传输的请求和响应。在我们的例子中，Web API 实际上返回了一个带有 HTTP 200 响应的有效响应，因此很明显 Chrome 随后决定将其阻止为不受信任。在我们的例子中，我们错过了您在设置服务器端时所拥有的SupportsCredentials = true 部分。

但是在修复这个问题之后（并且它开始通过我们使用 xhrFields: withCredentials: true 的 jQuery 调用工作）我们注意到在我们使用 fetch 并且没有传递凭据的 React 应用程序中，我们得到了 401 /403。添加 credentials: 'include' 然后允许该调用也可以工作。

希望这对某人有所帮助，因为它困扰了我们很长一段时间。

【参考方案2】：

查看EnableCorsAttribute method，first属性是允许查询您网站的地址。

正如您所说的它在 IE 中有效，这应该是因为访问它的页面位于 http://localhost:14054 之外的另一个地址上。

您的代码应如下所示以启用它：

var corsAttr = new EnableCorsAttribute("*", "*", "*") SupportsCredentials = true;
        config.EnableCors(corsAttr);

或查看ASP.NET documentation（在控制器或方法上）：

[EnableCors(origins: "", headers: "", methods: "*")]

public class TestController : ApiController

    // Controller methods not shown...

编辑：

检查一个other answer I did here，可能是您的方法实现正在崩溃（可能是您的凭据逻辑，这意味着它不是CORS问题），这不会使API返回Access-Control-Allow-Origin标头

【讨论】：

是的，我尝试使用通配符 * 作为来源，但也没有用。