ASP.net Core 2.2 上的 Reactjs 到 Webapi 失败，应用程序中出现错误 415，但 Postman 中没有

Question

它可以执行 GET OK，但无法执行 POST。我已经尝试了各种 Header 组合。它到本地主机。

这是我的 Reactjs 应用调用

export function saveStaff(data) {
       return fetch(baseUrl, {
    mode: "no-cors",
    method: "POST", 
    headers: {
      Host: "localhost:44370",
      Allow: "GET, POST",
      Accept: "application/json, text/plain",
      "Content-Type": "application/json"
    },
    body: { Name: "tuesday", Department: "tuesday", visitorcount: 0 } // data // JSON.stringify(data)
  })
    .then(handleResponse)
    .catch(handleError);
}

这是来自 Postman 的标题！

POST /api/StaffNamesAPI HTTP/1.1
Host: localhost:44370
Allow: GET, POST
Content-Type: application/json
Accept: application/json, text/plain
User-Agent: PostmanRuntime/7.16.3
Cache-Control: no-cache
Postman-Token: a5b282c7-24e7-46a6-ba22-4f74a31fa9bd,2232ec6c-b3e9-4e29-88e3-abf63675486c
Host: localhost:44370
Accept-Encoding: gzip, deflate
Content-Length: 122
Connection: keep-alive
cache-control: no-cache

 {"Name": "Wednesday TestWithPostman",
    "Department": "Groan",
    "visitorcount": 0 }

这里是 API 控制器

    [HttpPost]
    [Consumes("application/json")] //https://github.com/aspnet/AspNetCore/issues/4396
    public async Task<ActionResult<StaffNames>> PostStaffNames(StaffNames staffNames)
    {
        _context.StaffNames.Add(staffNames);
        await _context.SaveChangesAsync();

        return CreatedAtAction("GetStaffNames", new { id = staffNames.Id }, staffNames);
    }

现阶段我的课很简单

public class StaffNames
{
    [Key]
    public int Id { get; set; }
    public string Name { get; set; }
    public string Department { get; set; }
    public int VisitorCount { get; set; }

}

在我的 startup.cs 中，我设置了 CORS

  //https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2#ecors
        services.AddCors(options =>
        {
            options.AddPolicy(MyAllowSpecificOrigins,
                builder =>
                {
                    builder.WithOrigins("http://localhost:3000/",
                        "http://www.contoso.com")
                        .AllowAnyHeader()
                        .AllowAnyMethod();
                });
        });

这是我的 useCors

 app.UseCors(MyAllowSpecificOrigins);
        //https://stackoverflow.com/questions/52896068/reactasp-net-core-no-access-control-allow-origin-header-is-present-on-the-r
        app.UseCors(builder => builder
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials());

感谢您的帮助，我已经考虑了好几个小时了！

Answer 1

如果您有两个项目，则需要将模式设置为cors。我遇到了与CORS相同的问题。最后，我通过删除原始网址中的/ 来克服它

services.AddCors(options =>
    {
        options.AddPolicy(MyAllowSpecificOrigins,
            builder =>
            {
                //Do not use `http://localhost:3000/`
                builder.WithOrigins("http://localhost:3000",
                    "http://www.contoso.com")
                    .AllowAnyHeader()
                    .AllowAnyMethod();
            });
    });

Configure method:
app.UseCors(MyAllowSpecificOrigins);

反应：

return fetch(baseUrl, {
        mode: "cors",
        method: "POST",
        headers: {
            Host: "localhost:44370",
            Allow: "GET, POST",
            Accept: "application/json, text/plain",
            "Content-Type": "application/json"
        },
        body: JSON.stringify({ Name: "tuesday", Department: "tuesday", visitorcount: 0 })
    })

Answer 2

由于某种原因，使用no-cors 模式会阻止将Content-Type 标头值设置为application/json，并且默认设置为test/plain，这会导致问题。经过一些研究，我发现cors 模式非常适合您的情况，因此首先考虑更多地了解所有这些模式并选择最适合您的模式。

其次，您需要在操作参数中添加[FromBody] 属性，以允许模型绑定器在服务器端解析json 正文。在客户端，您需要在发送对象之前将其序列化为 json，因为fetch 不会为您执行此操作。最小的工作代码如下所示

控制器

[HttpPost]
[Consumes("application/json")]
public IActionResult PostStaffNames([FromBody]StaffNames staffNames)

反应

export function saveStaff(data) {
    return fetch(baseUrl, {
        mode: "cors",
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
    })
    .then(handleResponse)
    .catch(handleError);
}