Drupal 8 REST API: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I was writing some JavaScript that needs to talk to a Drupal 8 site’s REST API.Te Drupal 8 instance runs on a separate domain . Due to the same origin policy the requests was blocked the browser

Due to the Origin policy, you cannot make a XMLHttpRequest from your domain to another domain. E.g. you cannot use http://twitter.com/… URLs unless your script was loaded from twitter.com. If your script is loaded from http://localhost/, the AJAX request also need to go to localhost.

Looking in Chrome’s console I can see that the GET is failing because the  an ‘Access-Control-Allow-Origin’ header is missing on the Drupal server. If you are not in charge of the Drupal site / server being requested you will have to contact the admin of that environment.

I’m always telling folks to read the error and logs closely.

This is not something you can get around with JavaScript easily and has to be addressed on the Drupal side.

Find:
.../sites/default/default.services.yml

Make a copy and rename the copy to:

.../sites/default/services.yml

Find this part of the code:


# 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

And change

enabled: true

The two important parts of the code are bolded below.

Find this part of the file:
# 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

Setting enabled to true allows turns on the configuration.

# Configure requests allowed from specific origins.
allowedOrigins: ['*']

allows access from all origins. You may want to limit this once you are further along in the development of your script.

Leave a Reply

Your email address will not be published. Required fields are marked *