Request: Configure CORS for StaticWebApp

[Strepto]

Is your feature request related to a problem? Please describe.

We are creating a solution where the files hosted on our static web app should also be available from a separate website. Currently that is blocked by CORS, and I cannot find a way to configure it.

The use-case we have is a shared "Portal" website that is embedding different web-apps on separate domains. This means that releases of the web-apps are independent of the portal, but that the portal needs to access these various services from the browser.

We are currently hosting these web-apps on AppService, but would like to use static apps instead. But we are blocked by CORS in the browser, and cannot find a way to enable

Is there any plans for adding CORS configuration?

Describe the solution you'd like

Exposed CORS whitelist for specific domains.

Describe alternatives you've considered

N/A

[manekinekko]

@Strepto Have you tried setting this up using a globalHeaders entry in your staticwebapp.config.json?

{
  "globalHeaders": {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT"
  }
}

You can also enable those headers for a specific route. See an example in the SWA playground. Let me know if that solved your issue.

[Strepto]

This works great, and I did not know about this.

We would like to be able to whitelist/allowlist multiple domains. So that would be a further feature request. As far as I know the allow origin header is for a single domain at a time (OR wildcard).

[SchulteMarkus]

You can also enable those headers for a specific route.

Can you maybe give an staticwebapp.config.json example for doing so? Having Access-Control-Allow-Origin": "*" only for /articles/*.html? I had a look at the SWA playground, but well, I don't see where I can get the actual parameters for staticwebapp.config.json

[xiningli]

@Strepto Have you tried setting this up using a globalHeaders entry in your staticwebapp.config.json?

{
  "globalHeaders": {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT"
  }
}

You can also enable those headers for a specific route. See an example in the SWA playground. Let me know if that solved your issue.

Unfortunately, it doesn’t work for me. But the same server code can work in Vercel, so I don’t think that’s related to my server settings.

[agravity-philipp]

@manekinekko can you verify this solution is still working?

I have added the globalHeaders as well to the staticwebapp.config.json. But without success.

On my static web app my API is not available from my localhost: Access to XMLHttpRequest at 'https://xxxxxxxxxxx.azurestaticapps.net/api/version' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any idea?

[xiningli]

@manekinekko can you verify this solution is still working?

I have added the globalHeaders as well to the staticwebapp.config.json. But without success.

On my static web app my API is not available from my localhost: Access to XMLHttpRequest at 'https://xxxxxxxxxxx.azurestaticapps.net/api/version' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any idea?

I think you are using NextJS, right? No CORS for nextjs for now

[agravity-philipp]

@xiningli We are using C# for API and for SWA we use Angular / Typescript.

[xiningli]

won't work for nextjs... and the next.config.js also won't work for async headers()

[michaelsoriano]

@xiningli - We're running into the same issue - using NextJS 13. Stuck on CORS issue. globalHeaders, nextConfig - all don't work. How did you fix the issue? Thx.