C#•14h ago

Getting CORS issues when ASP.NET + frontend project is deployed to Azure

Access to fetch at '[backendURL]/Taxon/GetAll' (redirected from '[frontendURL]/api/Taxon/GetAll') from origin '[frontendURL]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to fetch at '[backendURL]/Taxon/GetAll' (redirected from '[frontendURL]/api/Taxon/GetAll') from origin '[frontendURL]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've tried to configure ASP.NET to include the frontend URL as a specific CORS policy, as well as configuring the CORS to "AllowAll", yet I still get this issue. I'm not sure if it's Azure or my backend that causes this error. Any ideas? I can provide more details.

6 Replies

Pobiega•13h ago

Always provide more details, in this case such as your application CORS code and what type of azure service you are using. That said, if you are using the Azure Webapp service, thats configured in azure: https://learn.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-rest-api#enable-cors

ZylvianOP•13h ago

Frontend + backend both in container apps. ASP.NET has an AllowAny policy that's applied:

public void AddAllowAnyCors(string policyName)
{
    builder.Services.AddCors(options =>
    {
        options.AddPolicy(policyName, policy =>
        {
            policy.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader();
        });
    });
}

public void AddAllowAnyCors(string policyName)
{
    builder.Services.AddCors(options =>
    {
        options.AddPolicy(policyName, policy =>
        {
            policy.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader();
        });
    });
}

The CORS is disabled in Azure, but have tried to do * on allowedorigins on the backend container app.

Pobiega•12h ago

That snippet configures a named policy, are you also making a call to app.UseCors(yourPolicyName); somewhere? specifically before auth/auth or any app.MapX methods, but before UseRouting

ZylvianOP•12h ago

I am indeed:

const string allowAnyName = "AllowAny";
builder.AddAllowAnyCors(allowAnyName);


var app = builder.Build();

app.UseFileServer();

// Configure middleware
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}

//Enable OpenAPI and Scalar
app.MapOpenApi();
app.MapScalarApiReference();

//Middleware pipeline
app.UseCors(allowAnyName);

const string allowAnyName = "AllowAny";
builder.AddAllowAnyCors(allowAnyName);


var app = builder.Build();

app.UseFileServer();

// Configure middleware
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}

//Enable OpenAPI and Scalar
app.MapOpenApi();
app.MapScalarApiReference();

//Middleware pipeline
app.UseCors(allowAnyName);

Pobiega•12h ago

Good. I'd suggest moving it before your app.MapX methods thou aspnet can be very particular about middleware ordering If it still doesnt work after that, I can only think that it must be outside asp.net They do have a guide on how to configure CORS for container apps, so that seems a good place to start: https://learn.microsoft.com/en-us/azure/container-apps/cors?tabs=arm&pivots=azure-portal

ZylvianOP•12h ago

It might be, I'm building and publishing my app with Aspire. I think the issue stems from, locally, I'm using Vite to do frontend -> frontend/api/GetAll -> backend/GetAll and I'm not sure what the intended way to do that is in Aspire 13. They are creating a Dockerfile behind the scenes when using AddJavascriptApp, but then how do you do the routing to the backend?

Gaming

Programming

Getting CORS issues when ASP.NET + frontend project is deployed to Azure

Did you find this page helpful?