Search code examples
c#corsblazorwebassembly

Access to remote URL has been blocked by CORS policy

I get below error. I already setup the server side with cors:

Access to XMLHttpRequest at 'https://www.learningcontainer.com/wp- 
content/uploads/2020/04/sample-text-file.txt' from origin 'https://localhost:44325' has been 
blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 
'https://learningcontainer.com' that is not equal to the supplied origin.
Solution

  • This configuration:

    services.AddCors(options =>
        {
            options.AddDefaultPolicy(builder =>
            builder.WithOrigins("https://www.learningcontainer.com") @* .AllowAnyOrigin() *@
                   .AllowAnyMethod()
                   .AllowAnyHeader());
        });

    should be done on a Server, and not yours but the server of the external API ( https://www.learningcontainer.com). You do nothing in that regard, except call end points on that Web Api.

    Workaround solution: AS CORS is a security feature of JavaScript enforced by the browser, you can circumvent it by calling your Server code from which you perform the call to this Web Api end point, and then returns it back to your WebAssembly front-end. You should use HttpClient to access the url from above.

    WebAssembly front end calls a controller's method on your server(hosted) by using HttpClient. Then you call the url from the hosted server app using HttpClient. When the Web Api (url) end point returns a value, you pass it on to the WebAssembly Blazor front end.