Trying to set up an app with headless Drupal 8 and blocked with the below error ?
No 'Access-Control-Allow-Origin' header is present on the requested resource
This is happening since you are missing some configuration related to Cross Origin Resource Sharing (CORS)
Latest D8 version is capable enough to adjust this issue.
For that locate your default.services.yml file
It should be there in <"Your_Project_Directory">/sites/default/default.services.yml
Copy this file and paste it in the same directory. Rename it to services.yml
Locate the cors.config section in file.
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 the configuration as shown below.
cors.config:
enabled: true
# Specify allowed headers, like 'x-allowed-header'.
allowedHeaders: ['Access-Control-Allow-Origin','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