通过 Axios 从 Javascript 代码发布到 .net Web Api 时，Access-Control-Allow Headers CORS 错误

Posted 2023-03-04

【中文标题】通过 Axios 从 Javascript 代码发布到 .net Web Api 时，Access-Control-Allow Headers CORS 错误

【英文标题】：Access-Control-Allow_Headers CORS error when posting to .net WebApi from Javascript code via Axios

【发布时间】：2021-01-01 12:44:46

【问题描述】：

我正在使用 Axios 执行从 javascript 到 .net WebApi 的发布请求。我将以下代码添加到我的 WebApi 的 Startup.cs 以允许任何标头并接受来自 localhost 的流量，如下所示：

Startup.cs 配置服务

servies.AddCors(options => 
    
      options.AddPolicy("AllowPolicy", 
        builder => builder
          .WithOrigins("http://localhost:8081")
          .AllowAnyHeader());
    );

控制器的动作被“EnableCors”属性修饰以应用上述策略

[HttpPost]
[Route("customers/tenantNumber")]
[EnableCors("AllowPolicy")
public async Task<ActionResult> AddCustomer(Customer customer)

我通过 axios post 方法调用上述路由。为此，我创建了一个 axios 实例并调用 post 方法：

function addCustomer(customer)
    const custAPI = axios.create(
           baseURL: 'myURL',
           withCredentials: false,
           headers: 
           'Content-Type: 'application/json'
           'Authorization: null,
           'Accept': 'application/json'
           
    );

    return custAPI().post("myWebApiURL", customer);

正在返回以下消息：“CORS 策略已阻止从原始“本地主机客户端站点”访问“webApi 站点”处的 XMLHttpRequest：访问控制不允许请求标头字段内容类型- 预检响应中的允许标头"

我已尝试删除 content-type 标头并将类型更改为“application/x-www-form-urlencoded”，但似乎无法找到此错误。

谁能告诉我我错过了什么？我已经尝试了这里提到的许多解决方案，但似乎可以解决这个问题。

【问题讨论】：

“预检响应”是关键。浏览器使用 OPTIONS 方法发出请求，因此您需要将其添加到服务器端代码中。

您是否在启动中添加了app.UseCors();？示例：docs.microsoft.com/en-us/aspnet/core/security/…

@juunas....抱歉没有包含，但是是的，我将它添加到 Configure 方法中。

.AllowAnyMethod()

@HereticMonkey...您是否建议创建扩展方法、属性等...？你能分享你在说什么的代码sn-p吗？我正在使用 .Net Core 3.1

【参考方案1】：

尝试保持 axios 实例创建简单，而是在请求中提供 headers 作为 config 参数，例如：

const custAPI = axios.create();

// Send request
const options = 
    headers: 
        "Content-Type": "application/json",
        Accept: "application/json"
    
;
const result = await custAPI.post(fullUrl, customer, options);

请注意，您发布的代码有几个缺少引号的语法错误，并尝试将 custAPI 用作函数而不是对象。