CORS error

[unborn acorn]

Hi there,

I built this form on the screenshot, when I click into submit button, it makes a request to the .NET api I have, and uploads the file user selected to the backend

const formData = new FormData();
formData.append('file', this.file, this.file.name);

this.http.post("http://localhost:7071/api/test" , formData).subscribe(res => {
    console.log(res);
});

And it works, I can get the file on my dotnet api without any problem.

My question is that, as you can see from the screenshot, it shows CORS error for the request. Can this be a problem? Does this error means even though it works right now on my local pc, it won't on production?

I've analyzed our frontend code to see how they uploaded a file, so I can use the same method.
We are using azure functions & dotnet on backend.

uploadVideo(video, callbackSuccess: (response) => void, callbackFailed: (response) => void){
      var bodyFormData = new FormData();
      bodyFormData.append('mimetype', video.type);
      bodyFormData.append('file',video);

      axios({
        method: "post",
        url: this.url + "savevideo",
        data: bodyFormData,
        headers: { "Content-Type": "multipart/form-data",
                  "Authorization":"Bearer " + this.authService.getIdToken(),
                  "Ocp-apim-subscription-Key": this.subscriptionKey},
      })
        .then(callbackSuccess)
        .catch(callbackFailed)
    }

I can see that they used a baerer token and Ocp-apim-subscription-Key.

But I can't do the same thing, because I'm trying to write something that external users can upload on a page, this page is going to be something like a trial. Our customer services will get in contact with the user to talk about his attachment, and maybe try to sell the product.

So the user is not logged in, and I can't create a bearer token I guess in this case?

Sorry if I said something really stupid, I'm just a junior 🙂

[hazy river]

CORS is server issue.

You need to configure CORS on your server.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[unborn acorn]

so even though it works on my pc, it's a problem, am I right ? @hazy river

Okay, I think I found how to configure it, thank you @hazy river

[cyan ruin]

// services
services.AddCors(opt =>
{
    opt.AddDefaultPolicy(pb => pb
        .WithOrigins("your-anuglar-app-url")
        .AllowAnyMethod()
        .AllowAnyHeader()
    );
});
...

// middleware pipeline
app.UseCors();

Assuming you're using minimal API's

AllowAnyMethod, AllowAnyHeader could be changed to WithMethods, WithHeaders

[hazy river]

https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-7.0

[cyan ruin]

Also, you can use AllowAnyOrigin if you're making your API public, but I don't think it's the case

[unborn acorn]

hmm, do I need to do it in code? I thought adding a star here would do the job?

we're using Azure functions with Azure

and for local development, I've added

    "CORS": "*"
  }

into my local app settings

the api is not public, but even though I allow everything here in the cors, I have a control over the api's by using AuthorizationLevel.Anonymous or AuthorizationLevel.Function,

On the endpoints where I use AuthorizationLevel.Function, people need to know my subscription key, so it's safe enough

[hazy river]

I think you still want to enable Cors property without using *

[unborn acorn]

okay, maybe I can type my domain here ?

[hazy river]

Yup that's the idea.