CORS headers

Overview

Cross Origin Resource Sharing (CORS) allows restricted resources on a website to be requested from another domain outside the domain from which it was originally served.

This example explains how this works:

  • Site A adds CORS headers to allow site B access to a resource on site A, such as a font.
  • Site B can then access that resource due to the CORS header.

Without the CORS header, Site B would not be able to access the resource on Site A. View the following pages for further details.

Only certain requests use CORS

The following requests use CORS.

What does this mean?

This means that requests to files such as index.html will not use CORS. However, a request to a font or CSS file will use CORS.

Adding CORS headers

The following links explain CORS headers in more detail.

The following are two simple examples of how to add CORS headers to your site.

Wildcard values

This example uses wildcards for each CORS header:

Header add Access-Control-Allow-Origin: "*"
Header add Access-Control-Allow-Methods: "*"
Header add Access-Control-Allow-Headers: "*"

Specific values

This example uses specific values for each CORS header:

Header add Access-Control-Allow-Origin: "https://example.com"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header add Access-Control-Allow-Headers: "Upgrade-Insecure-Requests"

Testing CORS headers

You can run the curl command (via SSH) to verify your CORS headers are functioning.

Make sure the URL you enter is to a specific asset on your site. The example below is checking the site's style.css file.

If you just check the index.html page, CORS headers will not be returned.

[server]$ curl -I https://example.com/style.css
HTTP/1.1 200 OK
Date: Tue, 10 Dec 2019 20:06:59 GMT
Server: Apache
Upgrade: h2
Connection: Upgrade
Last-Modified: Wed, 04 Dec 2019 21:53:08 GMT
ETag: "2d-598e7d69349fd"
Accept-Ranges: bytes
Content-Length: 45
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: DELETE,PUT,OPTIONS,DELETE,PUT
Access-Control-Allow-Headers: Upgrade-Insecure-Requests
Content-Type: text/css

Did this article answer your questions?

Article last updated PST.

Still not finding what you're looking for?