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

debugcn 发表于 Dev

动态

这是我的Cors初始化代码：

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

但是，当我运行PATCH时，在Chrome 83中出现以下错误：

通过CORS策略阻止从来源“ https://users-dev.myproject.com”访问“ https://api-dev.myproject.com/api/mp”的访问：否“ Access-Control-Allow” -Origin'标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“ 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: `"${JSON.stringify(mpForm.values)}"`,

并且通过重构API使其与这样的主体配合使用，解决了该问题：

body: JSON.stringify(mpForm.values),

这是一个问题，原因是stringify函数在返回值中嵌入了双引号，导致传递了这样的字符串：

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

然后导致CORS错误。

克里斯·谢勒

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

在API startup.cs中，确保在配置所有其他配置之前先配置CORS。
```
app.UseCors(builder => builder
   .AllowAnyOrigin()
   .AllowAnyMethod()
   .AllowAnyHeader()
```
此代码有效，尽管不是很安全，但它将在全球范围内满足您应用的浏览器CORS协议
确保在整个API中没有冲突的CORS配置，在控制器或方法中查找失败请求的单个CORS配置。
检查客户端，尽管客户端代码看起来不错，但从变量中注入了主体，以解决任何客户端到服务器的问题，您需要以纯文本格式记录完整的请求，或者从您的网络流量检查工具中检索该请求Web浏览器在运行时。

如果对您的API的大多数查询都能正确解决，并且只有一两个失败，那么这很好地表明了客户端存在问题，您应该从这里开始。

更新：

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

格式错误的请求在生成对OPTIONS请求的正确响应之前Web API可能会失败，并且如果该OPTIONS请求未按照规范进行响应，则浏览器将首先将此报告为CORS拒绝问题，以阻止来自API的真实错误响应
在向论坛发布问题以寻求有关解决错误的建议时，提供导致错误的代码仅能说明问题。您需要包括显示运行时值以及实际错误消息的日志。