Problem
Facing No ‘Access-Control-Allow-Origin’ header is present on the requested Drupal 8.x error message on browser while working with Drupal Rest API’s
Final output
After setting up the CORS policy for Drupal Rest API’s we can successfully able to make it work on bowers and would not have the below error message again.
Access to XMLHttpRequest at ‘example’ from origin ‘example’ has been blocked by CORS policy. No ‘Access-Conrol-Allow-Origin’ header is present on the requested resource.
Most of the time you wonder when working with Drupal rest APIs in your application and this error message creeps up 😀
Usually this error occurs when the client URL and server URL don’t match (including the port number)
So to resolve the problem we need to enable the service for CORS
Why?
If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.
What is Drupal Advanced CORS module?
Cross-origin resource sharing (CORS) – the module provides possibility to customize settings CORS by path patterns.
All settings will be saved in configs.
So, the solution is to enabling CORS and allow Access-Control-Allow-Origin authorization for origin domains using Advanced CORS module in Drupal 8.x site.
Let’s get started 🙂
Solution
1. Get Advanced CORS module by visiting here and then install the module in your Drupal 8.x site.
Note: The URL to install the module is https://ftp.drupal.org/files/projects/advanced_cors-8.x-1.1.tar.gz
2. Enable the Advanced CORS module.
3. Now we have to add route configuration in our CORS settings.
Configuration -> Web services -> CORS Settings
Then click on Add Route configuration button
4. Adding CORS route configuration settings as per your desired requirements.
1. Name for the route configuration.
2. Patterns
3. Allowed headers
4. Allowed methods
5. Allowed origins
Then click on Save
Finally after successfully configured the CORS route now go to your browser and try to hit the Drupal rest API’s end point and you will see the response is showing successfully 🤩
Congratulations now you can work with Drupal Rest APIs without No ‘Access-Control-Allow-Origin’ header is present on the requested Drupal 8.x error message on browser ❤️
