Search code examples
angularasp.net-coreasp.net-core-webapimultipartform-datahttp-status-code-500

Angular's post request is blocked by the server due to cors policy but is working fine with Postman

On front-end I am using Angular 14, Back-end is of Asp.net Core v5.

In asp.net core I have disabled the cors by adding

AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()

Now my other forms are working fine.

But, this form where I am using Form Data is creating an issue. Let see the browser enter image description here

Another error below this is enter image description here

Now it says its a cors issue. However let me remind us all that I have already added the cors policy and all my other form is working fine.

So in addition to this request, I have added one more header and now my http packet looks like this, enter image description here

I have added the missing header as well but the result is the same. What could have gone wrong?

Is the formdata culprit? or is the file?

on the server side, I have added the cors policy enter image description here

and this is my ViewModel

enter image description here

Additionaly this is the action method

enter image description here

Solution

  • So I found the problem and it was not related to CORS policy as such.

    The problem was "Model Validation"

    I have not mentioned the extra file field which was going to the server in the server's View model.

    Later on, I added another property of type "IFormFile?" which would successfully receive the file data from my FormData.