No ‘Access-Control-Allow-Origin’ header is present on the requested Drupal 8.x rest APIs

Reading time: 4 minutes

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

CORS policy
CORS policy No 'Access-Control-Allow-Origin' header is present on the requested resource 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

Install Advanced CORS module Drupal 8.x site
Install Advanced CORS module Drupal 8.x site

2. Enable the Advanced CORS module.

Enable Advanced CORS module
Enabling 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

Add Route configuration from CORS settings
Add Route configuration from CORS settings

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

Adding CORS configuration
Adding CORS configuration

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 🤩

Success getting API response
Success response after CORS settings for Drupal rest API's

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 ❤️

Share your love with us 😉

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Leave a Reply