Ajax Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

Question

I'm writing a simple site that takes as input an idiom, and return its meaning(s) and example(s) from Oxford Dictionary. Here's my idea:

I send a request to the following URL:

http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=[idiom] 

For example, if the idiom is “not go far”, I'll send a request to:

http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=not+go+far 

And I'll be redirected to the following page:

http://www.oxfordlearnersdictionaries.com/definition/english/far_1#far_1__192 

On this page, I can extract the meaning(s) and the example(s) of the idiom.
Here's my code for testing. It will alert the response URL:

<input id="idiom" type="text" name="" value="" placeholder="Enter your idiom here"> <br> <button id="submit" type="">Submit</button> <script type="text/javascript"> $(document).ready(function(){     $("#submit").bind('click',function(){         var idiom=$("#idiom").val();         $.ajax({             type: "GET",             url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',             data:{q:idiom},             async:true,             crossDomain:true,             success: function(data, status, xhr) {                 alert(xhr.getResponseHeader('Location'));             }         });              }); }); </script> 

The problem is I've got an error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=by+far. This can be fixed by moving the resource to the same domain or enabling CORS.

Can anybody tell me how to resolve this please?
Another approach is fine too.

Answer 1

JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy. JSONP takes advantage of the fact that browsers do not enforce the same-origin policy on script tags. Note that for JSONP to work, a server must know how to reply with JSONP-formatted results. JSONP does not work with JSON-formatted results.

http://en.wikipedia.org/wiki/JSONP

Good answer on StackOverflow: jQuery AJAX cross domain

$.ajax({   type: "GET",   url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',   data:{q:idiom},   async:true,   dataType : 'jsonp',   //you may use jsonp for cross origin request   crossDomain:true,   success: function(data, status, xhr) {     alert(xhr.getResponseHeader('Location'));   } }); 

Answer 2

Place below line at the top of the file which you are calling through AJAX.

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