4

I have two systems helpdesk.ops.something.in and dev1.ops.something.in

I have a file fetchP.php in helpdesk.ops whose code goes something like this:

<?php
header('Access-Control-Allow-Origin: *');
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    function someFunc(item) {
        $.ajax({method:"GET", 
        url:"http://dev1.ops.something.in/wallet/createurl.php?phone="+item, 
        success:function(response){
            console.log(response);
        }
        });
    };
</script>';
<?php
echo '<div id="callToWallet" class="sample-button" onclick="someFunc(911234567890);"><a href="#"> Click here</a></div>';

which is doing a GET request to a file createurl.php present in the dev1.ops, which goes something like this:

<?php
header('Access-Control-Allow-Origin: *');?>
<script>response.addHeader("Access-Control-Allow-Origin", "*");</script>
<?php 
// the rest of the code
?>

But on executing, the GET request is not successful, and I am getting error:

XMLHttpRequest cannot load http://dev1.ops.something.in/wallet/createurl.php?phone=911234567890. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://helpdesk.ops.something.in' is therefore not allowed access. The response had HTTP status code 500.

What am I missing?

Sanjiban Bairagya
  • 704
  • 2
  • 12
  • 33
  • Possible duplicate of ["No 'Access-Control-Allow-Origin' header is present on the requested resource"](http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource) – padarom Nov 17 '15 at 07:02
  • No, it's not. The php header('Access-Control-Allow-Origin: *'); might not be present in the called php file in that one. – Sanjiban Bairagya Nov 17 '15 at 07:05

1 Answers1

15

Even with the Access-Control-Allow-Origin header set, a XMLHttpRequest cannot request ressources on domains that are different from the one of your current domain (this is due to the same-origin policy).

One way you could try to get around it is to use JSONP. Here's a simple and rudimentary example:

fetchP.php (Ajax call):

function someFunc(item) {
    $.ajax({
        method: "GET",
        data: { phone: item },
        url: "http://localhost:2512/createurl.php", 
        success: function(response){
            console.log(response);
        },
        dataType: "jsonp",
    });
};

createurl.php:

<?php
  header('Access-Control-Allow-Origin: *');

  $data = ["foo" => "bar", "bar" => "baz"];
  $json = json_encode($data);

  $functionName = $_GET['callback'];

  echo "$functionName($json);";
?>

Example output of the createurl.php on an ajax request:

jQuery2130388456100365147_1447744407137({"foo":"bar","bar":"baz"});

jQuery then executes the defined function and calls the defined success method on the given parameters (JSON in this case).

padarom
  • 3,529
  • 5
  • 33
  • 57
  • So if I use JSONP, should it work even when the two php files are not in the same machine? – Sanjiban Bairagya Nov 17 '15 at 07:34
  • It should, that's the whole point of JSONP. When I tried this code, technically the header in the `createurl.php` wasn't even necessary. – padarom Nov 17 '15 at 07:38
  • But it is not working in here. It is hitting `http://dev1.ops.something.in/wallet/createurl.php?callback=jQuery2130056362116476520896_1447747236866&phone=911234567890&_=1447747236867` and in the console it is showing the error: `Failed to load resource: the server responded with a status of 500 (Internal Server Error)`. My `createurl.php` goes like this: https://paste.kde.org/pqnivzx9r – Sanjiban Bairagya Nov 17 '15 at 08:12
  • 1
    Error 500 means that it is an issue with your server `dev1.ops.something.in` or `createurl.php`. Your code works when I'm running it manually. But keep in mind that you need to output a javascript function for JSONP to work. – padarom Nov 17 '15 at 08:28
  • What do you mean by output a js function? Can you please point out in what manner is what you are returning from `createurl.php` and what I am returning, are different? This could help me in making the changes in my `createurl.php` as well. Also, you are free to suggest some direct modifications in my code as well, which you think might work. Thanks a lot :) – Sanjiban Bairagya Nov 17 '15 at 08:45
  • 1
    Please take another look at my answer. When doing an AJAX call via JSONP, jQuery appends a couple of parameters including the name of a callback (in your comment this would be `jQuery21300563621164‌​76520896_1447747236866`). Therefore you need the output of your createurl.php to be this function with a parameter containing your data: `jQuery21300563621164‌​76520896_1447747236866({"response":"okay","phonenumber:"911234567890"});`. jQuery will then parse the result and execute your defined `success` function with this parameter. – padarom Nov 17 '15 at 09:08