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.


Currently looking for employment in Canada, USA or Asia. My portfolio is at Jaypan, and you can 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