PHP Fix: No ‘Access-Control-Allow-Origin’ Header ~ Tech Blog

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 using PHP.

Let’s take a look at the following example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!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 and that 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 hasn’t 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 as they 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.

The Fix.

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 is allowed to make cross-domain requests to your website.

Note that I am using PHP in this example:

1

2

//Set Access-Control-Allow-Origin with PHP

header('Access-Control-Allow-Origin: http://site-a.com', false);

In the PHP code above, I am telling the browser that site-a.com has permission to make cross-domain requests to my website. The second parameter of PHP’s header function has been set to FALSE so that it is not overwritten by any other Access-Control-Allow-Origin headers that we may add in the future.

Note that you may also come across examples like this on the web:

1

2

//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 may 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. Note that this method will only work if the data being scraped does not require the user to be logged in.

Tech Blog

Thursday, 9 August 2018