CODEWITHSUNDEEP
symfonydrupalcorsdrupal-8
user3018066
user3018066

Reputation: 63

How to configure cors.config: parameters in Drupal 8.2

I'm trying to add the CORS headers to my Drupal 8.2 instance, using the YAML file located at sites/default/services.yml however I am not able to make Drupal generate the necessary header: Access-Control-Allow-Origin → *

Here is my sites/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: true
    # 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

Does anyone know if I need to verify anything else, or how to debug why the .yml file is not working?

Note: I have tried adding in settings.php: header("Access-Control-Allow-Origin: *"); and this works, however, it is not the recommended way of doing this, since 8.2 has this specific configuration file.

Upvotes: 1

Views: 1455

Answers (2)

Interlated
Interlated

Reputation: 5926

My configuration was not working because I dropped off the pararameters: attribute of the services.yml file.

Ensure that it starts with parameters:

parameters:
 # Configure Cross-Site HTTP requests (CORS).
 # Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
 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: ['http://localhost:4200']
   # 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: true

Upvotes: 1

Justin Levi Winter
Justin Levi Winter

Reputation: 2737

Here is my working services.yml file and corresponding JS request for Drupal 8.3.7.

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: ['http://localhost:3000']
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: true
# Sets the Access-Control-Max-Age header.
maxAge: 1000
# Sets the Access-Control-Allow-Credentials header.
supportsCredentials: false

Here is a quick developer tools console fetch to verify the response. 

function reqListener() {  
  var data = this.responseText;  
  console.log(data);  
}

function reqError(err) {  
  console.log('Fetch Error :-S', err);  
}

var oReq = new XMLHttpRequest();  
oReq.onload = reqListener;  
oReq.onerror = reqError;  
oReq.open('get', 'http://blt.dev/session/token', true);  
oReq.send();

This responds with the appropriate csrf token for the anonymous user.

enter image description here

Upvotes: 2

Related Questions