Access to XMLHttpRequest at from origin 'https://localhost:7135' has been blocked by CORS policy:

Radzen.Blazor Components
1

Hello I am getting this Cors error using the RadzenGoogleMap component in my Blazor WASM project.

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true' from origin 'https://localhost:7135' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
InstrumentHooks.js:97

Here is my code

<RadzenGoogleMap ApiKey="xxxxxx" style="height: 400px"
Options=@(new Dictionary<string, object> { { "disableDoubleClickZoom", true } })
Zoom=13 Center=@(new GoogleMapPosition() { Lat = 42.6977, Lng = 23.3219 })>

<RadzenGoogleMapMarker Title="London" Label="London" Position=@(new GoogleMapPosition() { Lat = 51.5074, Lng = 0.1278 }) />
<RadzenGoogleMapMarker Title="Paris " Label="Paris" Position=@(new GoogleMapPosition() { Lat = 48.8566, Lng = 2.3522 }) />

Thank you for your help.

2

Hi @Curtis,

Check what's the difference between your app and our demos - they are also WASM however there are no CORS errors:

image
image1920×1080 326 KB

3

I found the issue.
Azure Application Insights is causing it. Here is the solution

I just added correlationHeaderExcludedDomains andit works now.

instrumentationKey: "xxxxxx",
correlationHeaderExcludedDomains: ['maps.googleapis.com'],