CORS on API portion of Azure Static Web Apps

[medhatelmasry]

My static web apps work quite well on Azure because both the API and the static app reside on the same endpoint. However, I realized that I cannot access the API on Azure Static Web Apps from another external app because of CORS. Please provide a mechanism so that CORS can be enabled on the API portion of a static web app on Azure.

[miwebst]

Updating title slightly. So I believe you can do this today by setting the CORS headers in your Function response. Would that unblock your scenario?

[johnkors]

I have the same issue.

The API the static web app uses is not based on the Azure Functions based API from Azure Static Web apps, but an external existing ASP.NET Core API. Unfortunately, ASP.NET Core has no way to configure CORS settings to handle a dynamic environment/url like Azure Static Web apps (or Vercel, Netlify, Heroku Review apps for that matter) provides.

Tried to ping in the ASP.NET team here: dotnet/aspnetcore#27333

[anthonychu]

@johnkors It doesn't look like having CORS support in the Static Web Apps function app would help you in this case. What may be useful to you is if there was a way to get a stable domain name for the staging slots #22 so that you can add a finite list of origins to the CORS middleware in your ASP.NET Core app.

[johnkors]

Yep, not using the functions, so obviously it won't help. Just saying, there will be scenarios where the APIs the Static Web Apps are connected to are not the bundled functions. And these APIs need to have CORS configuration that allow for dynamic origins, as they are created by Azure.

For my ASP.NET Core API (again, not a function), I got it working using a CorsOptions setting where I can dynamically validate origins (as opposed to static upfront pre-configured). See dotnet/aspnetcore#27435 (comment).

Setting up a stable domain name is easy for a stable URL, but not when it's subdomain changing for every PR received on GitHub.

[nogic1008]

Is it resolved by "Bring your own Functions"?

[Stuart88]

Yep. Could really do with being allowed to enable CORS for debugging against existing Azure Functions here.

So far I am really not having a very fun time with this Azure Static Web app malarkey. Highly limited and difficult to use...

[nogic1008]

It is resolved on #588 (comment)

[Reshmi-Sriram]

Closing the issue, feel free to re-open if needed!

[johnkors]

Allow-Origin: * is not a solution . It's just bypassing the issue.

[thomasgauvin]

@johnkors what is your specific use case? are you hosting your ASP.NET app on app service? If so, you could link your App Service to Azure Static Web Apps using the BYO API support https://docs.microsoft.com/en-us/azure/static-web-apps/apis-overview. This would alleviate your CORS issues

[johnkors]

Not hosting my backend at Azure. Heroku.

[thomasgauvin]

For your specific use-case @johnkors, it seems different than the initial issue, which requested their Static Web App APIs to be accessible on other sites. Your use-case seems to be the opposite, accessing another sites' API from your Static Web App, and it would require enabling CORS on your backend which you seem to have configured within your .NET API.

Is the remaining issue the varying URLs for preview environments?

[sheenamnarula]

Faced the same issue. This is because in static web apps , we don't have access to the deployed azure functions and headers are preserved in api. But a workaround can be using context.res.headers. Pass access-control-allow-origin headers in context.res.headers of api to be accessed outside.
For example : https://example.com has to access api of azure static web app, we can pass response like :

context.res["headers"] = {
'Access-Control-Allow-Origin': "https://example.com",
'Access-Control-Allow-Methods': 'POST, GET, OPTIONS'
}

This will resolve the cors issue and api will be accessed outside static web app as well.

[johnkors]

Is the remaining issue the varying URLs for preview environments?

Yes.

[aluitink]

It is resolved on #588 (comment)

I'm using SWA with (managed) Azure Functions API - I cannot get the globalHeaders to work properly for CORS from API responses.

I found a *Note in the Global Headers documentation that indicates:

"Global headers do not affect API responses. Headers in API responses are preserved and returned to the client."