Azure published Blazor app XMLHttpRequest Error

Eduardo Fonseca 1 Reputation point
2021-02-25T12:16:35.56+00:00

Hello,
I have a couple of Blazor Web Assembly Appps published to Azure App Service.
Some in .NET Core 3.1 and some in .NET 5
I noticed when they are published to Azure, the console shows this error message

> blazornet5spinnerstest.azurewebsites.net/:1 Access to XMLHttpRequest at 'https://app-directory.s3.amazonaws.com/hootlet/launched-app-directory-apps.json' from origin 'https://blazornet5spinnerstest.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I don't see that message when testing locally.
I already tried setting up cors allowing everything, but the errors keeps showing in the published app.

Any ideas how to fix this?

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,479 questions
Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
7,285 questions

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Michael Wang-MSFT 1,061 Reputation points
    2021-02-26T06:05:07.79+00:00

    Hi, @Eduardo Fonseca ,

    Check the App Service CORS section in Azure portal.

    72286-image.png

    72344-image.png

    You should notice the difference of App Service CORS and your CORS. You can use your own CORS utilities instead of App Service CORS for more flexibility. For example, you may want to specify different allowed origins for different routes or methods. Since App Service CORS lets you specify one set of accepted origins for all API routes and methods, you would want to use your own CORS code. See how ASP.NET Core does it at Enabling Cross-Origin Requests (CORS).

    Don't try to use App Service CORS and your own CORS code together. When used together, App Service CORS takes precedence and your own CORS code has no effect.

    Enable App Service CORS support

    ------
    If the answer doesn’t solve your issue, please provide more details of error that will help us track down what’s happening.
    If the answer is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best Regards,
    Michael Wang

    0 comments
  2. Ryan Hill 26,866 Reputation points Microsoft Employee
    2021-02-28T03:32:31.797+00:00

    Hi @Eduardo Fonseca ,

    I deployed the boilerplate Blazor WebAssembly template and couldn't reproduce your issue. I do see that in the URL, Hootlet is an extension that

    Hootlet is a free extension for Google Chrome that lets you compose and share content directly from your web browser, saving you time by preloading shareable content such as images, videos, webpage links, or text quotes, right from the webpage you're viewing.

    Perhaps the extension is attempting to read shareable content and is causing the CORS issue. Try disabling the extension and see if the issue goes away.

    Regards,
    Ryan

    0 comments