Do you want to know how to deal with the error CORS policy no ‘access-control-allow-origin’? If yes, don’t hesitate to check out the blog today since we will bring you some solutions to this problem. Let’s start now!
Introduction
What is CORS and why do you need it?
CORS stands for Cross-Origin Resource Sharing, a mechanism that controls the sharing of a website’s resources (e.g., fonts, JavaScript, etc.) with other websites.
As you know, the Same Origin Policy (SOP) is one of the important security policies in browsers, introduced in 1995 by Netscape. In simple terms, this policy stipulates that the content and resources of a domain can only be requested by other components in the same domain. If the request comes from another domain, it will be blocked.
Although SOP is effective, it prevents legitimate interactions between trusted servers or clients. For example, interactions between two domains with different origins, such as api.example.com and image.example.com will be blocked by SOP.
That is why CORS was created as a feature built into HTML5. It uses HTTP headers to guide web browsers in managing the cross-domain resources. As a result, it allows getting data from another website via XMLHttpRequest. Thanks to CORS, the website owner can control and allow the appropriate websites to make requests to the website owner’s website, avoiding system resource errors.
Why do you get the error CORS policy no ‘access-control-allow-origin’?
Normally, the error CORS policy no ‘access-control-allow-origin’ will occur if you call an API on the server without the header Access-Control-Allow-Origin. Besides that, when you use an invalid value, this error will also arise, and as a result, you will not get data from the API.
If you want to fix this effectively, let’s move on to the next part to explore the suggestions.
How to solve the error CORS policy no ‘access-control-allow-origin’
The first solution you should try is to add the origin of the requesting websites to the list of domains that are allowed to access. You just need to add the websites to the Access-Control-Allow-Origin header’s value. Let’s have a look at the following example:
If you want to allow a website https://abc.site to access the resource, the header will be:
Access-Control-Allow-Origin: https://abc.site
Moreover, you can also configure your website to permit other sites to access your site with the help of the * wildcard. However, be careful. You should use it only for public APIs. For instance:
Access-Control-Allow-Origin: *
On the other hand, with private APIs, you need to use a specific domain or domain set instead of the * wildcard. Furthermore, you shouldn’t use the * wildcard to allow all sites to access a private API.
If you want to permit any site to make CORS requests without the * wildcard, your server must read the value of the request’s Origin header. After that, your server will use the value to set Access-Control-Allow-Origin and set Vary: Origin header in order to show that some headers will be set depending on the origin.
Because the exact directive to set headers depends on the server you are using, the directives differ among web servers. For Apache, find the server’s configuration, which is typically in the .conf file or in a .htaccess file, then add the following code:
Header set Access-Control-Allow-Origin 'origin-list'
In Nginx, you just need to use the command below to set up the header:
add_header 'Access-Control-Allow-Origin' 'origin-list';
Wrap Up
All in all, those are some recommendations for you to fix the error CORS policy no ‘access-control-allow-origin’. We hope that you can effectively tackle the issue with the help of our blog today. If you have any questions, don’t hesitate to leave your comment below.
Moreover, if you are looking for a new website template for your site, why don’t you check out our responsive and SEO-friendly Joomla 4 Templates and free WordPress themes here? They won’t let you down. Thanks for visiting and have a great day.
