CORS and Drupal 8

What is CORS?

Cross-origin resource sharing (CORS) is a specification to allow cross-domain communication from the browser. CORS is necessary because the same-origin policy prevents such behavior by default. 

The same-origin policy ensures that information remains private by preventing sites from accessing data stored by other sites. For example, it forbids a malicious website from accessing account information from others sites that is stored in cookies.

CORS policies are set on the server, however they are enforced by the browser. CORS policies do not control how data is accessed or returned, instead it instructs the browser whether or not to trust certain requests.

When a server wants to deny a CORS request, it simply returns a regular response without a CORS header. Browsers require explicit permission from the server to allow CORS requests, this is interpreted by the browser as an implicit denial.

This is a guide to enabling CORS on Drupal version 8.2 or later.

If you need to enable CORS on a previous version, then you can do so either with custom code, or with the CORS module.

The first thing to do, is from the Drupal directory, navigate to sites/default. If that directory contains a file named services.yml, you will work with that file. Otherwise, create a copy of default.services.yml and name it services.yml.

At the bottom of the you can view and change Drupal's CORS settings.

 # Configure Cross-Site HTTP requests (CORS).
   # Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
   # for more information about the topic in general.
   # Note: By default the configuration is disabled.
  cors.config:
    enabled: false
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: []
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: []
    # Configure requests allowed from specific origins.
    allowedOrigins: ['*']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: false
    # Sets the Access-Control-Max-Age header.
    maxAge: false
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: false

 

By default, CORS is disabled for security reasons as you can observe from the first line which instructs the server not to send a CORS header to the client (browser). To enable CORS, this value should be changed to true.

allowedHeaders: This informs the browser which header requests will be allowed.

allowedMethods: This informs the browser which methods are allowed. These will most often be either GET or POST, though other methods are sometimes used such as PUT, DELETE or OPTIONS.

Allowed Origins: This specifies which domains are permitted. The default '*' is a wildcard which permits all sites.

Unless the resource needs to be shared publicly, for example it is a public API, it is good practice to replace the wildcard with the specific domain(s) to be permitted.

exposedHeaders: Specifies which headers are safe to expose to the API. See here for more info.

The last two options are less frequently used. For additional information about these and other methods, see:

MDN: Cross-Origin Resource Sharing (CORS)

W3C: Cross-Origin Resource Sharing