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:

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

And I'll be redirected to the following page:

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 type="text" name="" value="" placeholder="Enter your idiom here"> <br> <button type="">Submit</button> <script type="text/javascript"> $(document).ready(function(){ $("#submit").bind('click',function(){ var idiom=$("#idiom").val(); $.ajax({ type: "GET", url: ' 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 . 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.

12 Answers

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.

Good answer on StackOverflow: jQuery AJAX cross domain

$.ajax({ type: "GET", url: ' 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')); } }); 

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

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

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 type="text" name="" value="" placeholder="Enter your idiom here"> <br> <button 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(""); ?> 

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.

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"); 

Add the below code to your .htaccess

Header set Access-Control-Allow-Origin *

It works for me.

Thanks

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> 

This also need.

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

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.

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.

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 } ); } 

Error

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

• Recommended: add a local server using chrome extension Web Server for Chrome ()