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

JqueryAjaxCross Domain

Jquery Problem Overview

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.

Jquery Solutions

Solution 1 - Jquery

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: https://stackoverflow.com/questions/3506208/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'));
  }
});

Solution 2 - Jquery

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

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

Solution 3 - Jquery

We can not get the data from third party website without jsonp.

You can use the php function for fetch data like file_get_contents() or CURL etc.

Then you can use the PHP url with your ajax code.

<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: 'get_data.php',
            data:{q:idiom},
            async:true,
            crossDomain:true,
            success: function(data, status, xhr) {
                alert(xhr.getResponseHeader('Location'));
            }
        });

    });
});
</script>

Create a PHP file = get_data.php

<?php
  echo file_get_contents("http://www.oxfordlearnersdictionaries.com/search/english/direct/");
?>

Solution 4 - Jquery

Is your website also on the oxfordlearnersdictionaries.com domain? or your trying to make a call to a domain and the same origin policy is blocking you?

Unless you have permission to set header via CORS on the oxfordlearnersdictionaries.com domain you may want to look for another approach.

Solution 5 - Jquery

add these in php file where your ajax url call

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true ");
header("Access-Control-Allow-Methods: OPTIONS, GET, POST");
header("Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control");

Solution 6 - Jquery

Add the below code to your .htaccess

Header set Access-Control-Allow-Origin *

It works for me.

Thanks

Solution 7 - Jquery

If your website also on the oxfordlearnersdictionaries.com domain, USE the following into the oxfordlearnersdictionaries.com .htaccess file:

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

Solution 8 - Jquery

I had the same problem when I was working on asp.net Mvc webApi because cors was not enabled. I solved this by enabling cors inside register method of webApiconfig

First, install cors from here then

public static void Register(HttpConfiguration config)
{
  // Web API configuration and services

  var cors = new EnableCorsAttribute("*", "*", "*");
  config.EnableCors(cors);

  config.EnableCors();
  // Web API routes
  config.MapHttpAttributeRoutes();

  config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = RouteParameter.Optional }
  );
}

Solution 9 - Jquery

This also need.

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

Solution 10 - Jquery

I used the header("Access-Control-Allow-Origin: *"); method but still received the CORS error. It turns out that the PHP script that was being requested had an error in it (I had forgotten to add a period (.) when concatenating two variables). Once I fixed that typo, it worked!

So, It seems that the remote script being called cannot have errors within it.

Solution 11 - Jquery

I think setting your header to Access-Control-Allow-Origin: * would do the trick here. Had the same issue and I resolved it like that.

Solution 12 - Jquery

Error

enter image description here

Why

CORS is an abbreviation for Cross-Origin Response Sharing. It is what allows the website on one URL to request data from a different URL, and it frustrates both the frontend and backend devs alike. This happens because the same-origin policy is part of the browser’s security model which allows websites to request data from APIs of the same URL but blocks those of different URLs. Browsers do this by adding an ORIGIN key in the request.

Solution

to prevent this error:

  • run your code on a server like node

or

Categories
Recommended Jquery Solutions
Recommended Ajax Solutions
Recommended Cross Domain Solutions

Previous Solution:

OSError - Errno 13 Permission denied

PythonDjangoApacheUnix

Next Solution:

Does Swift have something like "ref" keyword that forces parameter to be passed by reference?

Pass by-ReferenceSwift

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNewbieView Question on Stackoverflow
Solution 1 - JqueryG.F.View Answer on Stackoverflow
Solution 2 - JqueryAndyPHPView Answer on Stackoverflow
Solution 3 - JqueryRaju SinghView Answer on Stackoverflow
Solution 4 - JqueryjsmartfoView Answer on Stackoverflow
Solution 5 - JqueryEr Sahaj AroraView Answer on Stackoverflow
Solution 6 - JqueryShafiqView Answer on Stackoverflow
Solution 7 - JqueryNikhil GyanView Answer on Stackoverflow
Solution 8 - JqueryTAHA SULTAN TEMURIView Answer on Stackoverflow
Solution 9 - JqueryJay BharatView Answer on Stackoverflow
Solution 10 - JqueryAryaView Answer on Stackoverflow
Solution 11 - JqueryVu Tuan HungView Answer on Stackoverflow
Solution 12 - JqueryMuhammad ZakariaView Answer on Stackoverflow