Skip to main content

CORS errors in page test results

When testing your website speed you may sometimes see requests fail due to CORS errors. In this article we explain what causes them and what you can do to fix these CORS issues in your synthetic tests.

What are CORS errors?​

CORS stands for cross-origin resource sharing. It refers to websites loading resources from other domain names in a way that is secure. CORS errors happen when a website tries to load a resource on another website when it isn't allowed to.

Browser place restrictions on what resources from other domains a website can access. For example, when you go to amazon.com that website can't just make an API request to your email provider and view your emails. Instead, websites have to explicitly opt into resource sharing.

When a website wants to grant access to requests coming from other domains it adds the Access-Control-Allow-Origin HTTP header to the response. Otherwise Chrome will show an PreflightMissingAllowOriginHeader error.

PreflightMissingAllowOriginHeader in Chrome

What are preflight requests?​

For some request types browser just directly request the resource from the other website. These are called simple CORS requests.

However, other cross-origin requests require a preflight requests to check the permissions of the endpoint. For example, that's the case when custom request headers are sent.

In the example request waterfall below we can see preflight request made with the OPTIONS HTTP method. The browser only makes the GET request once the server has confirmed that it supports making that cross-origin request.

Preflight request on a website

The crossorigin attribute​

Certain resources can usually be loaded from another domain without a CORS request, for example scripts or stylesheets.

However, if you add the crossorigin attribute to the element then you'll need to make sure the server responds with a suitable Access-Control-Allow-Origin response header.

<link
  rel="stylesheet"
  href="https://www.example.com/bootstrap.css"
  crossorigin
/>

How to fix CORS errors in page tests​

Normally page tests should run normally if CORS works correctly when visiting your website manually. However, in some cases you may see CORS errors that you can't replicate outside of the test environment.

HeaderDisallowedByPreflightResponse and HTTP header advanced settings​

If you've set up additional HTTP headers when testing your page then this can turn simple requests into CORS requests that require a preflight request.

In this case you have two options:

  • Disable the custom header
  • Support preflight requests on your backend

Custom HTTP header causing a CORS error

PreflightInvalidStatus when access is denied​

If you see a 403 error for the preflight request that suggests that your the other website is blocking DebugBear requests.

To fix that you can:

  • Check the logs for the server that the cross-origin requests are made to to see why the request is blocked
  • Allowlist requests from DebugBear IP addresses

Request waterfall showing a 403 error for a preflight request

Last updated on