Age Themes

If you’ve ever encountered the error CORS policy no ‘access-control-allow-origin’, it can be frustrating and confusing to understand what it means and how to solve it. This error occurs when you try to make a cross-origin request from a web application that is being served from a different domain, protocol, or port than the resource you are trying to access.

In simpler terms, CORS (Cross-Origin Resource Sharing) is a security mechanism implemented in web browsers that restricts web pages or scripts from making requests to a different domain than the one that served the original web page. This mechanism is used to prevent malicious attacks such as cross-site scripting (XSS) and cross-site request forgery (CSRF).

What causes the error CORS policy no ‘access-control-allow-origin’?

The CORS policy no ‘access-control-allow-origin’ error occurs when a web page or application running in a browser tries to make a request to a resource that is hosted on a different domain, protocol, or port than the one from which the web page or application originated. This mechanism is called “Cross-Origin Resource Sharing” or CORS, and it is a security feature implemented by web browsers to prevent malicious attacks such as cross-site scripting (XSS) and cross-site request forgery (CSRF).

When a web page or application makes a cross-origin request, the server hosting the resource must include the “Access-Control-Allow-Origin” header in the response to indicate which domains are allowed to make requests to the resource. If the header is missing or set to a domain other than the one from which the web page or application originated, the browser will block the request and return the CORS policy no ‘access-control-allow-origin’ error. This error indicates that the resource has not granted permission for the web page or application to access it, and the request has been blocked for security reasons.

How to deal with the error CORS policy no ‘access-control-allow-origin’?

The first thing to do is to add the source of the requesting websites to the list of domains that are allowed to access. All you have to do is add the websites to the Access-Control-Allow-Origin header’s value. Check out this example:

Assuming you allow the website https://abc.site to access the resource, the header will look like this:

Access-Control-Allow-Origin: https://abc.site

Besides that, you are also able to modify your site in order to allow other sites to access your site by using * wildcard. Please remember that you should use it only for public APIs. For instance:

Access-Control-Allow-Origin: *

In case the API is private, instead of using the * wildcard, you need to use a specific domain or domain set. It’s not a good idea to open up your private API to every website by using the * wildcard.

In order to grant permission for any site to make CORS requests without using the * wildcard, your server must extract the origin header value from the request. Next, your server will utilize the value to set Access-Control-Allow-Origin and set Vary: Origin header to ensure that some headers will be set that depends on the origin.

Since the exact directive to set headers depends on your server, there are some different directives among web servers.

With Apache, its time for you to add the following code to the server’s configuration which is typically in the .conf file or in a .htaccess file:

Header set Access-Control-Allow-Origin 'origin-list'

With Nginx, all command you need to use in order to set up the header is:

add_header 'Access-Control-Allow-Origin' 'origin-list';

Closing thoughts

In conclusion, the CORS policy no ‘access-control-allow-origin’ error is a common problem when making cross-origin requests. There are several solutions to solve this error, including checking the server response headers, setting the “Access-Control-Allow-Origin” header, using a proxy

Last but not least, don’t forget to visit our site and get more responsive and eye-catching Joomla 4 templates as well as free WordPress themes.

AgeThemes Digital Team

We’re Digital Content Marketing team from AgeThemes Marketplace. We provide quality content for everyone who using open source CMS like Joomla and WordPress. If you have any questions or feedback, feel free leave your comment, we happy to assist you asap.