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 功能修復它