This is a short guide on how to fix Access-Control-Allow-Origin issues when you are sending Ajax requests. In this article, I will explain why it is happening and what you can do to prevent it.
Take a look at the following example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>No 'Access-Control-Allow-Origin' header</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$.ajax({
url: 'https://google.com'
});
</script>
</body>
</html>
In the example above, we attempt to send a simple Ajax request to Google using the JQuery library. However, if you run the JavaScript above, you will notice that the Ajax request fails. Furthermore, the developer console will display the following error.
Failed to load https://google.com/ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost’ is therefore not allowed access.
This error message is essentially telling us that we do not have permission to carry out an Ajax request to Google. Why? Because it is a cross-domain request and Google has not given us permission to do so.
Although you can easily embed images and videos, etc, from other websites – Ajax requests are a completely different ball game. Ajax requests are governed by something called a CORS policy. If this policy did not exist, then websites could potentially exploit Ajax requests to access sensitive information on other websites that the user is logged into.
How to fix this error.
If you own the website that you are attempting to make an Ajax request to, then you can whitelist the domain that is making the request.
Let’s say that you have a website called example.com and another website called site-a.com.
For whatever reason, you want to be able to make Ajax requests to example.com from site-a.com. On example.com, you will need to whitelist site-a.com by using the Access-Control-Allow-Origin header.
By using this header, you are telling the browser that site-a.com has permission to make cross-domain requests to your website.
PHP example.
Take the following PHP example.
//Set Access-Control-Allow-Origin with PHP
header('Access-Control-Allow-Origin: http://site-a.com', false);
In the PHP code above, we are telling the browser that site-a.com has permission to make cross-domain requests to our server.
Note that you may also come across examples like this on the web.
//Access-Control-Allow-Origin header with wildcard.
header('Access-Control-Allow-Origin: *');
In the PHP code above, we have used a wildcard character. The problem with this is that it will allow everybody to make Ajax requests to our website. This is a lazy solution that can introduce security risks.
Workaround.
If you need to scrape data from another website using Ajax and that website has not given you the permission to do so, then you will need to create a “go-between script” on your server.
For example, you could potentially create a PHP script that sends a GET request to the website in question and then outputs the response. That way, you can send Ajax requests to your “go-between script” instead of trying to get around the CORS policy.
However, this method will not work if authentication is required.