VueJs + ASP.Net Core Web API 发出 post 请求

Question

我有一个 VueJs 前端，我想在其中向我的 ASP.NET Core Web API 发出发布请求。 VueJs 应用程序中的代码如下所示：

methods: {
    async addProject(project){

        const res = await fetch('https://localhost:44357/test/data/CreateProject', {
            method: 'POST',
            headers: {
                'Content-type': 'application/json'
            },
            //mode: 'no-cors',
            body: JSON.stringify(project)
        })

        const data = await res.json()

        this.projects = [...this.projects, data]
    },
},

该 url 可能具有误导性，所以我想澄清一下，这个 url 在 Web API 内部映射到控制器内部的方法，该方法应该获取一个只有 name 属性的项目对象。

现在对于 ASP.NET Core Web API，我已经设置了 cors 以便我可以调用它：

services.AddCors();
...
app.UseCors(
    options => options.WithOrigins("http://localhost:8080").AllowAnyMethod()
);

现在对于路由映射，我是这样做的：

endpoints.MapControllerRoute(
    name: "test",
    pattern: "test/data/CreateProject",
    defaults: new { controller = "Models", action = "createproject" }
);

//the function:
[HttpPost]
public string CreateProject([FromBody] Project data)
{
    Debug.WriteLine(data.Name);
    return "Ok";
}

现在我得到的错误是我无法打电话，因为 cors 政策对我来说很奇怪。 我以为我允许 vuejs 应用程序拨打电话。 然后我安装了 chrome 插件 CORS unblock，它基本上没有解决这个问题，但是在网站检查器内的网络选项卡中，我可以看到有一个状态代码为 204 的 Post Request。我只想确认数据是否到达我的 Web Api。 我做错了什么，我需要改变什么才能做到这一点？

Answer 1

app.UseCors(
    options => options.WithOrigins("http://localhost:8080").AllowAnyMethod().AllowAnyHeader()
);

使用 AllowAnyHeader 功能修复它