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

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.