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   lt input id  quot idiom quot  type  quot text quot  name  quot  quot  value  quot  quot  placeholder  quot Enter your idiom here quot  gt   lt br gt   lt button id  quot submit quot  type  quot  quot  gt Submit lt  button gt   lt script type  quot text javascript quot  gt    document  ready function           quot  submit quot   bind  click  function            var idiom    quot  idiom quot   val              ajax               type   quot GET quot               url   http   www oxfordlearnersdictionaries com search english direct                data  q idiom               async true              crossDomain true              success  function data  status  xhr                    alert xhr getResponseHeader  Location                                                     lt  script gt   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

User · Accepted Answer

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.

User · Answer

Place below line at the top of the file which you are calling through AJAX   header  Access-Control-Allow-Origin

User · Answer

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

User · Answer

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    lt input id  idiom  type  text  name    value    placeholder  Enter your idiom here  gt   lt br gt   lt button id  submit  type    gt Submit lt  button gt   lt script type  text javascript  gt    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                                             lt  script gt    Create a PHP file   get data php   lt  php   echo file get contents  http   www oxfordlearnersdictionaries com search english direct       gt

User · Answer

If your website also on the oxfordlearnersdictionaries com domain  USE the following into the oxfordlearnersdictionaries com  htaccess file      Header set Access-Control-Allow-Origin

User · Answer

Add the below code to your  htaccess  Header set Access-Control-Allow-Origin    It works for me   Thanks

User · Answer

This also need    lt  php header  Access-Control-Allow-Origin

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

add these in php file where your ajax url call header  quot Access-Control-Allow-Origin    quot    header  quot Access-Control-Allow-Credentials  true  quot    header  quot Access-Control-Allow-Methods  OPTIONS  GET  POST quot    header  quot Access-Control-Allow-Headers  Content-Type  Depth  User-Agent  X-File-Size  X-Requested-With  If-Modified-Since  X-File-Name  Cache-Control quot

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

Examples related to jquery

Examples related to ajax

Examples related to cross-domain