Do you hope 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 for this trouble. Let’s start now!
Introduction
What is CORS and why do you need it?
CORS stands for Cross-Origin Resource Sharing which is a mechanism that allows limiting 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 on browsers, introduced in 1995 by Netscape. In simple terms, this policy stipulates that the content and resources of a domain will only be requested from another component in the same domain. If the request is from other domains, it will be blocked.
Although SOP is effective, it prevents legitimate interactions between trusted servers or clients. For example, two domains that do not have the same origin, api.example.com and image.example.com will be prevented by SOP.
It is the reason why CORS was born as a feature built into HTML5. It will be added to HTTP headers to guide web browsers in managing the cross-domain resources. As a result, it will allow getting data from another website via XMLHpptRequest. 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 API to 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, it will not get data from API.
If you desire to address the tackle 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 * 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, it’s necessary for you 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, the value of the request’s origin header must be read by your server. 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, there will be different directives among web servers. For Apache, let’s 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, that 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 your visit and have a great day.
- How to place menu items in helix joomla 5 ? - December 14, 2024
- How to reduce the size of helix 2 layout ? - December 14, 2024
- What’s J4 starter template and how to use it - December 3, 2024
Recent Comments