XMLHttpRequest cannot load an URL with jQuery

Question

I m trying to get some json data from a  remote  website  I run my web service on the 99000 port then  I launch my website on the 99001 port  http   localhost 99001 index html    I get the following message       XMLHttpRequest cannot load http   localhost 99000 Services svc ReturnPersons  Origin http   localhost 99001 is not allowed by Access-Control-Allow-Origin    Even If I launch my web page as an HTML file  I get this       XMLHttpRequest cannot load http   localhost 99000 Services svc ReturnPersons Origin null is not allowed by Access-Control-Allow-Origin    The web service returns data  I try to catch the data items like this   var url    http   localhost 99000 Services svc ReturnPersons     getJSON url  function  data    success  readData data      function readData data        alert data 0  FirstName       And I m trying to get this structure      FirstName   Foo   LastName   Bar     Hello   Foo   LastName   World      Do you know why I m getting this error

User · Accepted Answer

You can t do a XMLHttpRequest crossdomain  the only  option  would be a technique called JSONP  which comes down to this   To start request  Add a new  lt script gt  tag with the remote url  and then make sure that remote url returns a valid javascript file that calls your callback function  Some services support this  and let you name your callback in a GET parameters    The other easy way out  would be to create a  proxy  on your local server  which gets the remote request and then just  forwards  it back to your javascript   edit addition   I see jQuery has built-in support for JSONP  by checking if the URL contains  callback     where jQuery will replace   with the actual callback method   But you d still need to process that on the remote server to generate a valid response

User · Answer

In new jQuery 1 5 you can use     ajax       type   GET       url   http   localhost 99000 Services svc ReturnPersons       dataType   jsonp       success  readData data       error  function  xhr  ajaxOptions  thrownError          alert xhr status         alert thrownError

User · Answer

Fiddle with 3 working solutions in action   Given an external JSON   myurl    http   wikidata org w api php action wbgetentities amp sites frwiki amp titles France amp languages zh-hans zh-hant fr amp props sitelinks labels aliases descriptions amp format json    Solution 1    ajax     jsonp     ajax     dataType   jsonp     url  myurl        done function   data          do my stuff       Solution 2    ajax   json  amp calback        ajax     dataType   json     url  myurl     amp callback          done function   data          do my stuff       Solution 3    getJSON   calback       getJSON  myurl     amp callback     function data         do my stuff       Documentations  http   api jquery com jQuery ajax    http   api jquery com jQuery getJSON

User · Answer

Found a possible workaround that I don t believe was mentioned   Here is a good description of the problem  http   www asp net web-api overview security enabling-cross-origin-requests-in-web-api  Basically as long as you use forms url-encoded plain text content types you are fine     ajax       type   POST       headers             Accept    application json            Content-Type    text plain             dataType   json       url   http   localhost endpoint       data  JSON stringify   DataToPost   123        success  function  data            alert JSON stringify data                     I use it with ASP NET WebAPI2  So on the other end   public static void RegisterWebApi HttpConfiguration config        config MapHttpAttributeRoutes         config Formatters Clear        config Formatters Add new JsonMediaTypeFormatter          config Formatters JsonFormatter SupportedMediaTypes Add new MediaTypeHeaderValue  text plain         This way Json formatter gets used when parsing plain text content type   And don t forget in Web config    lt system webServer gt   lt httpProtocol gt     lt customHeaders gt       lt add name  Access-Control-Allow-Origin  value       gt       lt add name  Access-Control-Allow-Methods  value  GET  POST    gt     lt  customHeaders gt   lt  httpProtocol gt          Hope this helps

User · Answer

I am using WebAPI 3 and was facing the same issue  The issue has resolve as  Rytis added his solution  And I think in WebAPI 3  we don t need to define method RegisterWebApi   My change was only in web config file and is working    lt httpProtocol gt    lt customHeaders gt    lt add name  Access-Control-Allow-Origin  value       gt    lt add name  Access-Control-Allow-Methods  value  GET  POST    gt   lt  customHeaders gt   lt  httpProtocol gt     Thanks for you solution  Rytis

[jquery] XMLHttpRequest cannot load an URL with jQuery

Examples related to jquery

Examples related to json

Examples related to cross-domain

Examples related to cors