occasionally getting XMLHttpRequest blocked by CORS policy

[omuleanu]

sometimes I'm getting this error: Access to XMLHttpRequest at 'https://y.clarity.ms/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. clarity.js:2

   POST https://y.clarity.ms/collect net::ERR_FAILED 500 (Internal Server Error)

and it looks like clarity is retrying and after 1 or 3 failed attempts it is getting a collect with the result 204 No Content

the clarity js code is not directly in the header but inside a tags.js file ( in case that's important )

[kukidon-dev]

The same issue happens for me as well

[Roopak17Gupta]

same. getting 500 errors

getting these response headers

HTTP/1.1 500 Internal Server Error Server: nginx/1.18.0 (Ubuntu) Date: Mon, 11 Dec 2023 10:31:22 GMT Content-Type: text/html Content-Length: 588 Connection: close access-control-allow-credentials: true access-control-allow-methods: * Access-Control-Allow-Origin: http://localhost:4200

[Ticolyle]

I am also experiencing this issue. We have already configured our CSP directives as suggested by the Clarity documentation: https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-csp

Are these related? #293 #59

Edit: A screenshot of my chrome console errors:

A screenshot of the headers sent with the request to https://o.clarity.ms/collect':

[Cotspheer]

I'm having the same issue even without CSP. Microsoft Clarity is configured with the Domain I use.

With CSP:

home:1 Access to XMLHttpRequest at 'https://y.clarity.ms/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
y.clarity.ms/collect:1

Without CSP:

Access to XMLHttpRequest at 'https://y.clarity.ms/collect' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Worked well in my experience but in the past days I'm not sure if there was a change either browser wise or Clarity wise.

My CSP:

const helmetConfig: HelmetOptions = {
      crossOriginEmbedderPolicy: false,
      contentSecurityPolicy: {
        directives: {
          defaultSrc: [
            "'self'",
            "ws:",
            "wss:",
            "data:",
            "penia.ai",
            "*.penia.ai",
            "googleapis.com",
            "*.googleapis.com",
            "gstatic.com",
            "*.gstatic.com",
            "clarity.ms",
            "*.clarity.ms",
            "googletagmanager.com",
            "*.googletagmanager.com",
            "google-analytics.com",
            "*.google-analytics.com",
            "google.com",
            "*.google.com",
            "azure.com",
            "*.azure.com",
            "applicationinsights.azure.com",
            "*.applicationinsights.azure.com",
            "in.applicationinsights.azure.com",
            "*.in.applicationinsights.azure.com",
            "https://login.microsoftonline.com",
            "microsoftonline.com",
            "*.microsoftonline.com",
            "bing.com",
            "*.bing.com",
            "'sha256-AF490//jIflwN/2nTDszvAx/KI2V9GJG8gdwvGhO/zw='",
            "'sha256-OqR09NfBvWA2ZwTWynEePdmVEHOs/pGbIMu8VG6Senc='",
            "'sha256-GpZxVZb6S9KUhqDOF09rKxWOvSIwMZ7XJ4hcR3MeSEI='",
          ],
          imgSrc: [
            "'self'",
            "data:",
            "*",
          ],
          styleSrc: [
            "'self'",
            "penia.ai",
            "*.penia.ai",
            "googleapis.com",
            "*.googleapis.com",
            "gstatic.com",
            "*.gstatic.com",
            "clarity.ms",
            "*.clarity.ms",
            "googletagmanager.com",
            "*.googletagmanager.com",
            "google-analytics.com",
            "*.google-analytics.com",
            "google.com",
            "*.google.com",
            "azure.com",
            "*.azure.com",
            "applicationinsights.azure.com",
            "*.applicationinsights.azure.com",
            "in.applicationinsights.azure.com",
            "*.in.applicationinsights.azure.com",
            "https://login.microsoftonline.com",
            "microsoftonline.com",
            "*.microsoftonline.com",
            "bing.com",
            "*.bing.com",
            "'unsafe-inline'",
          ],
          scriptSrc: [
            "'self'",
            "penia.ai",
            "*.penia.ai",
            "googleapis.com",
            "*.googleapis.com",
            "gstatic.com",
            "*.gstatic.com",
            "clarity.ms",
            "*.clarity.ms",
            "googletagmanager.com",
            "*.googletagmanager.com",
            "google-analytics.com",
            "*.google-analytics.com",
            "google.com",
            "*.google.com",
            "azure.com",
            "*.azure.com",
            "applicationinsights.azure.com",
            "*.applicationinsights.azure.com",
            "in.applicationinsights.azure.com",
            "*.in.applicationinsights.azure.com",
            "https://login.microsoftonline.com",
            "microsoftonline.com",
            "*.microsoftonline.com",
            "bing.com",
            "*.bing.com",
            "'sha256-AF490//jIflwN/2nTDszvAx/KI2V9GJG8gdwvGhO/zw='",
            "'sha256-OqR09NfBvWA2ZwTWynEePdmVEHOs/pGbIMu8VG6Senc='",
            "'sha256-GpZxVZb6S9KUhqDOF09rKxWOvSIwMZ7XJ4hcR3MeSEI='",
            (_req: any, res: any) => `'nonce-${res.locals["cspNonce"]}'`,
          ],
          scriptSrcAttr: [
            "'unsafe-inline'",
          ],
        },
      },
    };

My System: Browser: Chrome Version 121.0.6167.86 (Official Build) (64-bit) OS: Microsoft Windows [Version 10.0.19043.2075], locale de-DE

[prein]

Same here, also started recently, tested on FF, Chrome, desktop and mobile

[Cotspheer]

Sorry for "spamming" but another update from my side: Currently its working again. Just a wild guess but maybe there is an instance that is stuck / configured wrong and maybe when a loadbalancer decides to route the traffic to a corrupted instance we see this error?

And as I'm writing this its already not working anymore. So maybe really a loadbalancer thing? I did not change / nor publish on my side that could have a side effect in the meantime.

EDIT: As I just recognized that it always returns a 500 status code. So it has nothing to do with CORS itself. Its just a misleading browser message. I really think there is an instance corrupted.

[josefpsurny]

I have the same problem here. When trying Google PageSpeed Insights test the problem is really intermittent. But in browser every time. Thinking why is the problem in emulated device only sometimes.

[mengcan555]

The same issue happens for me as well

[sayushman19]

#335 POST https://m.clarity.ms/collect net::ERR_NAME_NOT_RESOLVED Ua @ clarity.js:2 (anonymous) @ clarity.js:2 (anonymous) @ clarity.js:2 (anonymous) @ clarity.js:2 o @ clarity.js:2 Promise.then (async) c @ clarity.js:2 (anonymous) @ clarity.js:2 at @ clarity.js:2 Pa @ clarity.js:2

facing such issue errors in console sometimes after Installing Microsoft Clarity in my project with 204 status code