Change record status: 
Project: 
Introduced in branch: 
8.2.x
Introduced in version: 
8.2.0
Description: 

As of Drupal 8.2, it's possible to opt in a particular site to enable CORS for responses served by Drupal.

(This is particularly helpful for fully decoupled Drupal sites which have JS that needs to talk to a Drupal 8 site's REST API. In such cases, that Drupal 8 instance often runs on a separate domain. Due to the same origin policy those requests will be blocked by the browser.)

This is not enabled by default because there are security consequences.

New in default.services.yml:

  # 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

Note particular that enabled: false key-value pair!

Impacts: 
Module developers
Themers
Updates Done (doc team, etc.)
Online documentation: 
Not done
Theming guide: 
Not done
Module developer documentation: 
Not done
Examples project: 
Not done
Coder Review: 
Not done
Coder Upgrade: 
Not done
Other: 
Other updates done

Comments

Jaypan’s picture

An example would be nice. I've tried every possible combination I could think of, and CORS requests are still denied.


Checkout my Japan podcasts.
johnreytanquinco’s picture

Yes. I would appreciate if you can provide us with a concrete example for it to be enabled.

This is so far is my config:

  cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['x-allowed-header']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['*']
    # Configure requests allowed from specific origins.
    allowedOrigins: ['http://localhost:9000']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: true
    # Sets the Access-Control-Max-Age header.
    maxAge: true
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: true

but still getting the error below:

XMLHttpRequest cannot load http://localhost:8888/dir/html/oauth/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

kevla’s picture

Yeah I'm getting the same issue.

emergencyofstate’s picture

I was able to make a successful GET request locally using the following cors.config. I transferred these rules over from headers I had previously set in my Apache VHost that I knew were working while experimenting w/ json_api.

(note: this is not an example of a production CORS configuration, just trying to get CORS to work via services.yml file)

  cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['x-csrf-token,authorization,content-type,accept,origin,x-requested-with']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['POST, GET, OPTIONS, DELETE, PUT']
    # Configure requests allowed from specific origins.
    allowedOrigins: ['*']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: false
    # Sets the Access-Control-Max-Age header.
    maxAge: 1000
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: false
mkudenko’s picture

Successful POST request to /user/login.

allowedHeaders is an array of comma-separated strings, not just a single string.

cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['x-csrf-token','authorization','content-type','accept','origin','x-requested-with']
    # 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: 1000
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: false