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

Question

I have a VueJs Frontend where I want to make a post request to my ASP.NET Core Web API. This is what the code in the VueJs app looks like:

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]
    },
},

The url could be missleading so I want to clarify that this url is mapped inside the Web API to a method inside the controller which should get a project object which has only a name attribute in it.

Now for the ASP.NET Core Web API I have set up cors so that I can make calls to it:

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

Now for the route mapping I did it like this:

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";
}

Now the error that I get is that I cannot make a call because of cors policy which is weird for me. I thought I allowed the vuejs app to make calls. I then installed the chrome plugin CORS unblock which didnt solve this basically but in the network tab inside the website inspector I can see that there is a Post Request with status code 204. I just want to confirm that the data arrives in my Web Api. What am I doing wrong and what do I need to change in order to make this happen?

Answer 1

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

Using AllowAnyHeader function fixed it