如何使用 Fetch 方法在 reactJS 的 post 调用中修复“请求的资源上不存在‘Access-Control-Allow-Origin’标头”

Posted 2023-03-03

【中文标题】如何使用 Fetch 方法在 reactJS 的 post 调用中修复“请求的资源上不存在‘Access-Control-Allow-Origin’标头”

【英文标题】：How to How to fix "No 'Access-Control-Allow-Origin' header is present on the requested resource" in post call in reactJS using Fetch method

【发布时间】：2019-12-27 12:04:46

【问题描述】：

当我使用 Fetch 选项从 ReactJS 后调用调用 DotNet 核心 API 方法时出现以下错误。

ReactJS post call 只有我得到了这个错误，下面是我尝试过的方式。

Jquery 获取/发布请求 - 工作正常 邮递员获取/发布请求 - 工作正常 Swagger 获取/发布请求 - 工作正常 ReactJS 获取请求 - 工作正常

ReactJS 发布请求 - 无法正常工作

“访问从源 'http://localhost:3000' 获取 'https://localhost:44352/api/Address/CheckAvailability' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有 'Access-Control-Allow-Origin' 标头存在于请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。”

/*ReactJS Code: */

export function saveAddress(address) 
   return fetch(baseURL + "Address/CheckAvailability", 
    method: "POST",
    headers: 
      "Access-Control-Allow-Origin": "*",
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    ,
    body: JSON.stringify(address),
  ).then(handleResponse)
    .catch(handleError);



/*Dot.Net core Code: */
[HttpPost]
public ActionResult CheckAvailability([FromBody]ReqAddressDetailsDto request)


  if ((request) == null)
    
      return NotFound();
    
  return Ok(request);

【参考方案1】：

您是否在此 .net 核心 api 中启用/配置了 cors？

How to enable CORS in ASP.NET Core

【讨论】：

是的，我做了你提到的。但仍然无法正常工作。

什么浏览器？火狐？尝试其他 - firefox 有时会在错误不同时抛出此错误。如果您在系统中启用/配置了代理，也可以尝试禁用代理，这个 api 的服务器是什么？ iis？您是否启用了匿名身份验证？

【参考方案2】：

如果您的客户端应用程序（React Web 应用程序）在另一个方案上（任何 http/https、域或端口不同），您需要在 ASP.NET Core 后端启用 CORS。

在 Startup.cs 文件中，您需要添加：

在ConfigureServices()

services.AddCors(options =>
        
            options.AddDefaultPolicy(builder =>
            
                builder.WithOrigins("http://localhost:3000/")
                .AllowAnyMethod()
                .AllowAnyHeader();
            );
        );

在Configure() 中将其放在app.UseMvc() 之前：

 app.UseCors();

查看此链接了解更多信息： https://docs.microsoft.com/en-us/aspnet/core/security/cors

【讨论】：

是的，我做了你提到的。但仍然无法正常工作。

我不知道浏览器是否会抱怨请求中的标头"Access-Control-Allow-Origin": "*"

可能是，我尝试了三天，我无法解决这个问题。你能告诉我这个问题是由 API 还是客户端 API 调用产生的

根据我的经验，当我遇到这个问题时，它只与服务器端有关。因为某些原因。也许，如果您还没有这样做，请尝试使用"*"（所有来源）而不是"http://localhost:3000"，看看它是否有效。

与 .NET Core 3.1 Web API 完美配合

【参考方案3】：

您可以在后端脚本中检查 CORS 标头。 CORS 标准通过将新的 HTTP 标头添加到标头的标准列表来管理跨域请求。以下是 CORS 标准新增的 HTTP 标头：

访问控制允许来源 访问控制允许凭据 访问控制允许标头 访问控制允许方法 访问控制公开标头 访问控制最大年龄 访问控制请求标头 访问控制请求方法 原产地

这些标题都很重要，但让我们关注以下标题：

访问控制允许来源

您应该将 Access-Control-Allow-Origin 标头定义为 '*'。我想，它可能会简单地解决你的问题。 php 的一个小例子：

<?php
header("Access-Control-Allow-Origin: *");

您可以在以下位置找到每个 CORS 标头的信息：CORS Headers. 如果您想了解更多关于CORS的详细信息，可以关注this link.

【讨论】：

是的，我做了你提到的。但仍然无法正常工作。

【参考方案4】：

此状态码是了解服务器不支持 OPTIONS 请求的有用提示。

在处理 OPTIONS 方法时，在服务器端添加相应的 header。然后我们会收到以下请求：

访问控制允许标题：内容类型

希望这能解决。