时间戳

首页 > 解决方案 > 为什么从 React 到 WebAPI 运行此 PATCH 方法时会出现 CORS 错误？

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

问题描述

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

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

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

从源“https://users-dev.myproject.com”获取“https://api-dev.myproject.com/api/mp”的访问权限已被 CORS 策略阻止：否“访问控制允许” -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错误。

标签： c#asp.net-corewebapi

解决方案

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

  1. 在 API startup.cs中，确保在所有其他配置之前配置了 CORS。

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

    此代码是有效的，虽然不是很安全，但它将满足您应用的全局浏览器 CORS 协议

  2. 确保在整个 API 中没有冲突的 CORS 配置，在控制器或方法上查找失败的请求的单个 CORS 配置。

  3. 检查客户端，虽然您的客户端代码看起来不错，但主体是从变量中注入的，为了解决任何客户端到服务器的问题，您需要以纯文本形式记录完整请求，或者从您的网络流量检查工具中检索它运行时的网络浏览器。

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

更新：

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

  1. 格式错误的请求 Web API 在生成对请求的正确响应之前可能会失败OPTIONS，如果OPTIONS请求没有按照规范响应，浏览器将首先将此报告为 CORS 拒绝问题，从而抑制来自 API 的真正错误响应

  2. 在向论坛发布问题以寻求解决错误的建议时，提供导致错误的代码仅描绘了部分情况。您需要包含显示运行时值以及实际错误消息的日志。

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

推荐阅读