为什么从 React 到 WebAPI 的 PATCH 方法会出现 CORS 错误运行？

Question

所以这是我的 Cors 初始化代码：

        app.UseCors(builder =>
            builder.AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin());

然而，当我运行 PATCH 时，我在 Chrome 83 中收到以下错误：

从来源 'https://users-dev.myproject.com' 在 'https://api-dev.myproject.com/api/mp' 获取的访问已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header。如果不透明的响应满足您的需求，请将请求的模式设置为 'no-cors' 以在禁用 CORS 的情况下获取资源。

这是调用 api（来自 React）的代码：

  const response = await fetch(API_URL() + `/mp`, {
    method: 'PATCH',
    body: `"${JSON.stringify(mpForm.values)}"`,
    headers: {
      Authorization: 'Bearer ' + apiToken,
      'Content-type': 'application/json'
    }
  });

这里可能出了什么问题？大多数 API 对该域的请求都没有问题。目前只有这个。

更新

以防万一您遇到了这个确切的问题，这个问题的根本原因是 body 行：

body: `"${JSON.stringify(mpForm.values)}"`,

问题已通过重构 API 以使用 body 来解决，如下所示：

body: JSON.stringify(mpForm.values),

这是一个问题的原因是 stringify 函数在 return 值中嵌入了双引号，导致传递的字符串如下所示：

'"{"foo":"bar"}"'

然后导致 CORS 错误。

Answer 1

您不能将 'allow any origin' 与授权结合使用。这是一个安全风险。您可以回显请求的来源，而不是允许任何来源，但您应该知道这样做会带来一些安全风险 - 您允许来自任何域的身份验证令牌。最好使用允许的域正确配置 CORS。

请参阅此问题的已接受答案：了解在这种情况下配置后端的一种方法，避免使用 Access-Control-Allow-Origin:*。

Answer 2

您的 CORS 配置看起来是正确的，如果某些请求有效，但其他请求无效，则问题可能根本不在 API 端。

在APIstartup.cs中，确保在所有其他配置之前配置CORS。
```
app.UseCors(builder => builder
   .AllowAnyOrigin()
   .AllowAnyMethod()
   .AllowAnyHeader()
```
This code is valid, though not very secure, it will satisfy browser CORS protocols globally for your app
确保在整个 API 中没有冲突的 CORS 配置，在控制器或失败请求的方法上查找单独的 CORS 配置。
检查客户端，虽然你的客户端代码看起来OK，body是从一个变量注入的，来解决任何客户端到服务器的问题您需要以纯文本形式记录完整请求，或在运行时从 Web 浏览器中的网络流量检查工具检索它的问题。

If most queries to your API resolve correctly and it is only one or two that fail, this is a good indicator that there is a problem at the client end, you should probably start here.

更新：

OP 的问题与 CORS 根本没有直接关系，但是它很好地提醒了两个重要的教训：

格式错误的 Web API 请求可能会在生成对 OPTIONS 请求的正确响应之前失败，并且如果 OPTIONS 请求未根据规范响应，浏览器会首先将此报告为 CORS 拒绝问题，从而抑制来自 API
的真正错误响应
在将问题发布到论坛以寻求解决错误的建议时，提供导致错误的代码只是描述了部分情况。您需要包含显示运行时值以及实际错误消息的日志。

为了调试客户端和服务器之间的任何 Web API 问题，您应该始终查看实际的 HTTP 请求和响应内容，headers 对于受影响的调用，您可以查看网络 trace 使用您的浏览器开发工具，但是如果您需要在生产中定期调试此类问题，您应该考虑在客户端或服务器端请求跟踪日志记录。

Answer 3

经过多次故障排除后，我们能够确定问题的根本原因是请求的正文。 stringify 方法是在用双引号括起来的字符串中嵌入双引号。

为什么这会导致 CORS 错误我仍然不清楚，但这可能是一个转移注意力的问题。

修复正文解决了问题。

我有兴趣了解导致浏览器出现 CORS 错误的事件链。但除此之外，我们现在已经解决了这个问题。

为什么从 React 到 WebAPI 的 PATCH 方法会出现 CORS 错误运行？

Why do I get CORS errors running this PATCH method from React to WebAPI?

c#

asp.net-core

webapi

更新：

为什么从 React 到 WebAPI 的 PATCH 方法会出现 CORS 错误 运行？

Why do I get CORS errors running this PATCH method from React to WebAPI?

c#

asp.net-core

webapi

更新：

为什么从 React 到 WebAPI 的 PATCH 方法会出现 CORS 错误运行？