Azure static web app content blocked by CORS

Question

Azure static web app content blocked by CORS

Olie Denyer 0

Over the last 2 days we have started to get errors accessing some content for our website that is hosted on Azure Static Web App. The errors point to an issue with pulling content from the CDN

"Access to fetch at 'https://market-assets.fra1.cdn.digital..... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled"

THE CDN integration is part of the managed service and for the last few weeks has been working fine. Any help would be appreciated?

VasimTamboli 5,550 Reputation points MVP

2023-06-04T12:04:47.8866667+00:00
to resolve the issue:

Verify the CORS configuration:

Check if the CDN resource that is causing the issue has the proper CORS configuration.

Make sure that the 'Access-Control-Allow-Origin' header is present in the CDN response headers.

Confirm that the allowed origin matches the domain from which you are accessing the content.

Set up CORS rules:

If the CDN is using Azure CDN Standard from Microsoft, you can configure CORS rules in the Azure portal.

Open the Azure portal and navigate to your CDN profile.

Go to the "CORS" settings and add the necessary rules to allow the desired origins.

Clear the CDN cache:

Sometimes, the CDN cache might still have the old configuration that does not include the necessary CORS headers.

Clear the CDN cache for the affected content to ensure that the new CORS configuration is applied.

Validate the CDN endpoint:

Double-check that the CDN endpoint is properly configured and pointing to the correct resource.

Ensure that the CDN endpoint is correctly associated with your Azure Static Web App.

Test with different browsers:

CORS policies can be enforced differently by various web browsers.

Test accessing the content from different browsers to see if the issue is specific to a particular browser.

Contact Azure Support:

If the issue persists and you have followed the above steps, consider reaching out to Azure Support for further assistance.

They can help investigate and provide guidance specific to your Azure environment and configuration.

By following these steps, you should be able to resolve the CORS issue and access the content from your Azure Static Web App without any errors.
Ajay Kumar N 28,161 Reputation points Microsoft Employee Moderator

2023-06-12T14:48:35.08+00:00

@Olie Denyer , Just checking in to see if you had got a chance to see the previous response. If the answer helped (pointed you in the right direction) > please click Accept Answer Or please share the requested/more info to help you better.
Mark Phillips 0 Reputation points

2023-11-07T03:25:15.51+00:00

Where is this "Go to the "CORS" settings and add the necessary rules to allow the desired origins." ??

I'm not seeing anything in Microsoft CDN Classic or the endpoints

1 answer

Your answer

VasimTamboli 5,550 Reputation points MVP

2023-06-04T12:04:47.8866667+00:00

to resolve the issue:

Verify the CORS configuration:

Check if the CDN resource that is causing the issue has the proper CORS configuration.

Make sure that the 'Access-Control-Allow-Origin' header is present in the CDN response headers.

Confirm that the allowed origin matches the domain from which you are accessing the content.

Set up CORS rules:

If the CDN is using Azure CDN Standard from Microsoft, you can configure CORS rules in the Azure portal.

Open the Azure portal and navigate to your CDN profile.

Go to the "CORS" settings and add the necessary rules to allow the desired origins.

Clear the CDN cache:

Sometimes, the CDN cache might still have the old configuration that does not include the necessary CORS headers.

Clear the CDN cache for the affected content to ensure that the new CORS configuration is applied.

Validate the CDN endpoint:

Double-check that the CDN endpoint is properly configured and pointing to the correct resource.

Ensure that the CDN endpoint is correctly associated with your Azure Static Web App.

Test with different browsers:

CORS policies can be enforced differently by various web browsers.

Test accessing the content from different browsers to see if the issue is specific to a particular browser.

Contact Azure Support:

If the issue persists and you have followed the above steps, consider reaching out to Azure Support for further assistance.

They can help investigate and provide guidance specific to your Azure environment and configuration.

By following these steps, you should be able to resolve the CORS issue and access the content from your Azure Static Web App without any errors.
Ajay Kumar N 28,161 Reputation points Microsoft Employee Moderator

2023-06-12T14:48:35.08+00:00

@Olie Denyer , Just checking in to see if you had got a chance to see the previous response. If the answer helped (pointed you in the right direction) > please click Accept Answer Or please share the requested/more info to help you better.
Mark Phillips 0 Reputation points

2023-11-07T03:25:15.51+00:00

Where is this "Go to the "CORS" settings and add the necessary rules to allow the desired origins." ??

I'm not seeing anything in Microsoft CDN Classic or the endpoints

Answer 1

Ajay Kumar N 28,161 Microsoft Employee Moderator

@Olie Denyer , Just checking in to see if you had got a chance to see the previous response.

From the issue description I understand the issue started only from the couple of days. Do you recall making any changes prior to this issue? If there are multiple apps, is this issue confined only to this App? ("THE CDN integration is part of the managed service") Are you referring to, Azure CDN being configured for your app?

If you haven't done this already. kindly review and try setting the following using a globalHeaders entry in your staticwebapp.config.json

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

Kindly let us know, I'll follow-up further.

Anonymous

2025-06-09T14:40:16.16+00:00

[WARNING] For Next.js apps, staticwebapp.config.json features are not fully supported yet!

Share via

Azure static web app content blocked by CORS

1 answer

Your answer