Is there any solution for the cross - origin request blocked: the same origin policy disallows reading the remote resource error?

Question

Here is the program I run:

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

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

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

<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>

After I run, it returns 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.

Does anyone have any suggestions for the problem below: cross-origin request blocked: the same origin policy disallows reading the remote resource in the programs - How to correct it?

lyytutoria · Accepted Answer

The cause: After researching your problem, I find that your website is not placed on the domain of oxfordlearnersdictionaries.com. You are attempting to call to the domain and the similar original policy that is preventing you, so the error happens. Solution: This error can be resolved only when you are allowed to set a header for the oxfordlearnersdictionaries.com domain through CORS. Or you can put the following line at the head of the file that AJAX is calling.

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

Gabriel Renaud · Answer

JSONP, or "JSON without padding", is a communication method used by JavaScript programs in web browsers to request data servers in different domains. This is prohibited by most web browsers due to the same-origin policies. JSONP exploits the fact that browsers don't enforce the same-origin policy for script tags. JSONP must be able to respond with JSONP-formatted answers in order to function. JSONP is not compatible with JSON-formatted outcomes.

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

Good answer from StackOverflow: jQuery AJAX across 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'));
 }
});

Simone Taylor · Answer

JSONP, or "JSON without padding", is a communication method used by JavaScript programs in web browsers to request data servers in different domains. This is prohibited by most web browsers due to the same-origin policies. JSONP exploits the fact that browsers don't enforce the same-origin policy for script tags. JSONP must be able to respond with JSONP-formatted answers in order to function. JSONP is not compatible with JSON-formatted outcomes.

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

Good answer from StackOverflow: jQuery AJAX across 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'));
 }
});

Sign Up

Sign In

Forgot Password

ITtutoria Latest Questions

Is there any solution for the cross – origin request blocked: the same origin policy disallows reading the remote resource error?