从 React 到 .NET Core Web API 进行 POST 时如何修复 CORS 错误？ [复制]答案

【问题标题】：How to fix CORS error when making a POST from React to .NET Core Web API? [duplicate]从 React 到 .NET Core Web API 进行 POST 时如何修复 CORS 错误？ [复制]
【发布时间】：2019-10-30 14:43:49
【问题描述】：

我正在尝试向本地 .NET Core Web API 发出 POST 和 GET 请求。我今天第一次了解了 CORS 问题，只需安装名为“Allow-Control-Allow-Origin: *”的 Google Chrome 扩展程序，我就能让 GET 请求正常工作。

但是，由于 CORS 政策，我的 POST 请求每次都失败。这太烦人了，我找不到简单或可靠的解决方法。我并没有考虑过让 CORS 在每个浏览器中都能正常工作。即使我可以让它单独在谷歌浏览器中工作并成为救生员。

我环顾四周，还没有适合我的简化解决方案。

在我的 React 应用程序中，我对 Web API 的调用如下所示。

axios.post('https://localhost:44395/api/record/create', { Status: "Initiated", Owner: "Peter Porcupine", DateTimeCreated: new Date().getTime(), LastTimeCreated: new Date().getTime(), Comment: { TimeStamp: new Date().getTime(), Text: "Comment sent to API." }})
    .then(response => {
      console.log("Response below from post request");
      console.log(response);
    });

调用返回 404，我还收到以下错误：从源“http://localhost:3000”访问“https://localhost:44395/api/record/create”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

我尝试使用具有类似主体的 Postman 发出 POST 请求，它可以工作并更新我的数据库。我确定这不是与我发送 API 的正文有关的问题。

【问题讨论】：

你需要学习如何使用CORS。 developer.mozilla.org/en-US/docs/Web/HTTP/CORS docs.microsoft.com/en-us/aspnet/web-api/overview/security/…
您需要在您的服务器上启用 CORS。您可以通过将Access-Control-Allow-Origin 设置为所有* 来做到这一点。 stackoverflow.com/questions/10636611/…
CORS 应该在服务器端解决。您的服务器应该能够处理OPTIONS 请求，并且应该发送带有相应值的标头Allow-Control-Allow-Origin。如果您正在使用某种框架，那么已经有一些代码/插件可以启用它。
这个答案可能会帮助您启用 CORS stackoverflow.com/questions/44379560/…

标签： javascript .net reactjs cors policy

【解决方案1】：

您的服务器应该正在发送响应。必须更改该响应的标头才能使 CORS 正常工作。

在向客户端发送响应时添加这三行：

context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
context.Response.Headers.Add("Access-Control-Allow-Methods", "POST, GET, 
OPTIONS,DELETE");
context.Response.Headers.Add("Access-Control-Allow-Headers", "Origin, Content-Type, 
Accept");

【讨论】：