Angular 4 应用程序和 MVC WebAPI 之间的 PUT 请求出现 CORS 错误

Posted 2023-03-04

【中文标题】Angular 4 应用程序和 MVC WebAPI 之间的 PUT 请求出现 CORS 错误

【英文标题】：CORS errors on PUT request between Angular 4 app and MVC WebAPI

【发布时间】：2018-03-13 17:28:44

【问题描述】：

我正在尝试找出导致我的 Angular 应用程序和 MVC Web API 应用程序之间出现问题的原因。

在我的webapiconfig.cs 中，我启用 CORS，如下所示：

var corsAttr = new EnableCorsAttribute("http://localhost:4200,http://domain1,http://domain2", "*", "*");
corsAttr.SupportsCredentials = true;

// Enable CORS Globally 
config.EnableCors(corsAttr);

我正在使用类似的方式执行 PUT 请求：

updateExchange(exchange: IOrder): Observable<IOrder> 
  return this._http.put<IOrder>(this._orderServiceUrl + '/' + order.Id, order)
    .do(this.handleSuccessResponse)
    .catch(this.handleErrorResponse);

我不确定这是否重要，但在我的请求中，我有时会根据错误返回不同的状态代码。

对预检请求的响应未通过访问控制检查： 响应中“Access-Control-Allow-Origin”标头的值必须 当请求的凭据模式为时，不是通配符“*” '包括'。因此不允许使用原点“http://localhost:4200” 使用权。发起请求的凭证模式 XMLHttpRequest 由 withCredentials 属性控制。

我收到了成功的响应，但在响应标头中，我没有看到任何 CORS 标头：

    Cache-Control:private
    Date:Mon, 02 Oct 2017 15:37:31 GMT
    Server:Microsoft-IIS/10.0
    Transfer-Encoding:chunked
    X-AspNet-Version:4.0.30319
    X-Powered-By:ASP.NET
    X-SourceFiles:=?UTF-8?<something>

关于我应该怎么做才能让它工作的任何建议？

【参考方案1】：

搜索您的代码，也许您添加了两次标题，这就是发生在我身上的事情......

我们做到了

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

在另一个地方：

        With filterContext.RequestContext.HttpContext.Response
            .AddHeader("Access-Control-Allow-Origin", "*");
            .AddHeader("Access-Control-Allow-Methods", "*");
            .AddHeader("Access-Control-Allow-Headers", "*");
        End With

【参考方案2】：

响应应该只有 Access-Control-Allow-Headers 中接受的标头，不要使用通配符。这存在安全问题，这就是您收到错误的原因。

请参阅this post 中的答案，了解有关为什么这是一种不好的做法的更多信息。这是一个 angular.js 帖子，但适用于 CORS 方面

【讨论】：

我有一个通配符的原因是 b/c 否则我会收到错误：服务器无法在 HTTP 标头发送后设置状态。

顺便说一句，从附加到答案之一的文档中，我看到只关注起源，现在是标题。无论哪种方式，这里的问题是响应标头根本没有任何标头，即使所有内容都是根据 ms 文档指定的（或者我遗漏了一些东西）。

好吧，嗯。好吧，那是不对的，您可以发布更多代码吗？你看过这篇文章了吗，***.com/questions/29709477/…

没关系，我只是发现：当我们出于某种原因第一次设置此 API 时，有一个代码可以在选项请求上刷新标头（设置它的人不记得为什么). 无论出于何种原因，它都不会复制 get 的标题，但会复制 post 和 put。我碰巧为那个 API 写了第一个 Put 请求。我删除了该代码，现在看起来很好。虽然帖子不正确，但它让我的想法朝着正确的方向发展。

很高兴你知道了