Cross Domain Ajax Request with Jquery/Php

How to send a cross domain ajax request

put it on top of config.php

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

Cross Domain Ajax Request with JQuery/PHP

The error seems to be a security feature of the Same Origin Policy: to simplify, you can only make AJAX requests for stuff on the originating server (http://foobar.com). One way around this is to make a simple facade on the originating server, e.g.:

 <?php
 // this file resides at http://foobar.com/getstuff.php
 echo file_get_contents('http://www.boobar.com/script.php?callback=?'
          . $possibly_some_other_GET_parameters );
 ?>

Then, from foobar.com, you can make an AJAX request for http://foobar.com/getstuff.php (which in turn makes a HTTP GET request from your web server to boobar.com and sends it back to the browser).

To the browser, the request goes to the origin server, and is allowed (the browser has no way of knowing that the response comes from somewhere else behind the scene).

Caveats:

• the PHP config at foobar.com must have allow_url_fopen set to "1". Although this is the default setting, some servers have it disabled.
• the request to www.boobar.com is made from foobar.com server, not from the browser. That means no cookies or user authentication data are sent to www.boobar.com, just whatever you put into the request URL ("$possibly_some_other_GET_parameters").

jQuery AJAX cross domain

Use JSONP.

jQuery:

$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     }      
});

PHP:

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."(".json_encode($arr).");";
?>

The echo might be wrong, it's been a while since I've used php. In any case you need to output callbackName('jsonString') notice the quotes. jQuery will pass it's own callback name, so you need to get that from the GET params.

And as Stefan Kendall posted, $.getJSON() is a shorthand method, but then you need to append 'callback=?' to the url as GET parameter (yes, value is ?, jQuery replaces this with its own generated callback method).

allow cross domain ajax requests

As mentioned above, anyone can send a request to you page at any time: so the major security concerns you need are to validate user input and only reveal information that is available for public consumption. But that applies to all scripts.

The two main issues you need to concentrate on (after validating user input) are:

1. The problem you may have is users receiving the information into their scripts. Depending on the browser (and even between flavours of the same browser) there are different security rules that prevent them from getting the information back. A common solution to this is to provide information back as "JSONP" which is to wrap your return value as a function call that can be executed by the client. Here's a quick example (taken from http://www.geekality.net/2010/06/27/php-how-to-easily-provide-json-and-jsonp/). To further lock it down, you can insist that all queries are JSONP and reject anyone not sending the callback function.

.

<?php

header('content-type: application/json; charset=utf-8');
$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);
echo $_GET['callback'] . '('.json_encode($data).')';

?>

2. Someone abusing your service by calling too regularly. Solutions for this are to trap the IP address and reject if you get too many calls from an IP address. Not foolproof, but it's a start.

Other factors to bear in mind:

• cookies and other headers set by your script will probably be ignored
• same applies to sessions

Cross-domain Ajax call vs php request

You said that you're allowed to make the request with PHP which sounds like you have an anchor where the href=https://coinmap.org/api/v1/venues/?mode=list.

CORS only prevents requests that are initiated via javascript. Requests made due to a user clicking on an anchor tag aren't restricted via CORS.

How to make a cross domain ajax call

You are making a cross domain ajax call. So it wont work if you try it just like a normal ajax call.

One way is like to

1. to set 'Access-Control-Allow-Origin' to '*' at the server end to which you are making the ajax request.

2. then make a jquery ajax call with the 'crossDomain' attribute 'true' in the settings variable.

Another way would be to use jsonp

depending on on the server you are using you can find how to add cors in this article.

UPDATE

her is a w3c article which describes how to configure cors in java servlets. See the In Java servlets section.

The point is basically that the server which is giving the ajax response should be having
"Access-Control-Allow-Origin" field set to "*" in the response headers.

Cross-Domain jQuery.Ajax request - Chrome extension

I found the problem... we have to use xhr

myScript.js :

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://domain.com/test/get.php", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        alert(xhr.responseText);
    }
}
xhr.send();

Thanks for your help ;)

EDIT: the real problem was to define jquery.js after in the myScript.js
manifest.json:

"background": {
        "scripts": ["jquery-2.1.4.min.js", "notification.js"]
},

---

Related Topics