How to get a cross-origin resource sharing CORS post request working

Question

I have a machine on my local lan  machineA  that has two web servers   The first is the in-built one in XBMC  on port 8080  and displays our library   The second server is a CherryPy python script  port 8081  that I am using to trigger a file conversion on demand   The file conversion is triggered by a AJAX POST request from the page served from the XBMC server    Goto http   machineA 8080 which displays library Library is displayed User clicks on  convert  link which issues the following command -    jQuery Ajax Request    post  http   machineA 8081    file url   asfd    function d  console log d       The browser issues a HTTP OPTIONS request with the following headers    Request Header - OPTIONS  Host  machineA 8081 User-Agent      Firefox 4 01 Accept  text html application xhtml xml application xml q 0 9     q 0 8 Accept-Language  en-us en q 0 5 Accept-Encoding  gzip deflate Accept-Charset  ISO-8859-1 utf-8 q 0 7   q 0 7 Keep-Alive  115 Connection  keep-alive Origin  http   machineA 8080 Access-Control-Request-Method  POST Access-Control-Request-Headers  x-requested-with    The server responds with the following    Response Header - OPTIONS  STATUS   200 OK   Content-Length  0 Access-Control-Allow-Headers    Access-Control-Max-Age  1728000 Server  CherryPy 3 2 0 Date  Thu  21 Apr 2011 22 40 29 GMT Access-Control-Allow-Origin    Access-Control-Allow-Methods  POST  GET  OPTIONS Content-Type  text html charset ISO-8859-1    The conversation then stops   The browser  should in theory  issue a POST request as the server responded with the correct     CORS headers  Access-Control-Allow-Origin       For troubleshooting  I have also issued the same   post command from http   jquery com   This is where I am stumped  from jquery com  the post request works  a OPTIONS request is sent following by a POST   The headers from this transaction are below   Request Header - OPTIONS  Host  machineA 8081 User-Agent      Firefox 4 01 Accept  text html application xhtml xml application xml q 0 9     q 0 8 Accept-Language  en-us en q 0 5 Accept-Encoding  gzip deflate Accept-Charset  ISO-8859-1 utf-8 q 0 7   q 0 7 Keep-Alive  115 Connection  keep-alive Origin  http   jquery com Access-Control-Request-Method  POST   Response Header - OPTIONS  STATUS   200 OK   Content-Length  0 Access-Control-Allow-Headers    Access-Control-Max-Age  1728000 Server  CherryPy 3 2 0 Date  Thu  21 Apr 2011 22 37 59 GMT Access-Control-Allow-Origin    Access-Control-Allow-Methods  POST  GET  OPTIONS Content-Type  text html charset ISO-8859-1   Request Header - POST  Host  machineA 8081 User-Agent      Firefox 4 01 Accept      Accept-Language  en-us en q 0 5 Accept-Encoding  gzip deflate Accept-Charset  ISO-8859-1 utf-8 q 0 7   q 0 7 Keep-Alive  115 Connection  keep-alive Content-Type  application x-www-form-urlencoded  charset UTF-8 Referer  http   jquery com  Content-Length  12 Origin  http   jquery com Pragma  no-cache Cache-Control  no-cache   Response Header - POST  STATUS   200 OK   Content-Length  32 Access-Control-Allow-Headers    Access-Control-Max-Age  1728000 Server  CherryPy 3 2 0 Date  Thu  21 Apr 2011 22 37 59 GMT Access-Control-Allow-Origin    Access-Control-Allow-Methods  POST  GET  OPTIONS Content-Type  application json   I can t work out why the same request would work from one site  but not the other   I am hoping someone might be able to point out what I am missing   Thanks for your help

User · Answer

Took me some time to find the solution   In case your server response correctly and the request is the problem  you should add withCredentials  true to the xhrFields in the request     ajax       url  url      type  method         This is the important part     xhrFields            withCredentials  true               This is the important part     data  data      success  function  response               handle the response            error  function  xhr  status               handle errors                Note  jQuery    1 5 1 is required

User · Answer

I solved my own problem when using google distance matrix API by setting my request header with Jquery ajax  take a look below   var settings                cache   false             dataType    jsonp              async   true             crossDomain   true             url    https   maps googleapis com maps api distancematrix json units metric amp origins place id   me originPlaceId   amp destinations place id   me destinationPlaceId   amp region ng amp units metric amp key mykey              method    GET              headers                    accept    application json                  Access-Control-Allow-Origin                                   ajax settings  done function  response              console log response                Note what i added at the settings       headers                accept    application json              Access-Control-Allow-Origin                    I hope this helps

User · Answer

If for some reasons while trying to add headers or set control policy you re still getting nowhere you may consider using apache ProxyPass     For example in one  lt VirtualHost gt  that uses SSL add the two following directives   SSLProxyEngine On ProxyPass  oauth https   remote tld oauth   Make sure the following apache modules are loaded  load them using a2enmod     proxy proxy connect proxy http   Obviously you ll have to change your AJAX requests url in order to use the apache proxy

User · Answer

I had the exact same issue where jquery ajax only gave me cors issues on post requests where get requests worked fine - I tired everything above with no results  I had the correct headers in my server etc  Changing over to use XMLHTTPRequest instead of jquery fixed my issue immediately  No matter which version of jquery I used it didn t fix it  Fetch also works without issues if you don t need backward browser compatibility           var xhr   new XMLHttpRequest           xhr open  POST    https   mywebsite com   true          xhr withCredentials   true         xhr onreadystatechange   function               if  xhr readyState     2      do something                    xhr setRequestHeader  Content-Type    application json           xhr send json    Hopefully this helps anyone else with the same issues

User · Answer

Using this in combination with Laravel solved my problem  Just add this header to your jquery request Access-Control-Request-Headers  x-requested-with and make sure that your server side response has this header set Access-Control-Allow-Headers

User · Answer

For some reason  a question about GET requests was merged with this one  so I ll respond to it here   This simple function will asynchronously get an HTTP status reply from a CORS-enabled page  If you run it  you ll see that only a page with the proper headers returns a 200 status if accessed via XMLHttpRequest -- whether GET or POST is used  Nothing can be done on the client side to get around this except possibly using JSONP if you just need a json object   The following can be easily modified to get the data held in the xmlHttpRequestObject object    x000D   x000D  function checkCorsSource source    x000D    var xmlHttpRequestObject  x000D    if  window XMLHttpRequest    x000D      xmlHttpRequestObject   new XMLHttpRequest    x000D      if  xmlHttpRequestObject    null    x000D        var sUrl       x000D        if  source     google     x000D          var sUrl    https   www google com   x000D          else   x000D          var sUrl    https   httpbin org get   x000D          x000D        document getElementById  txt1   innerHTML    Request Sent      x000D        xmlHttpRequestObject open  GET   sUrl  true   x000D        xmlHttpRequestObject onreadystatechange   function     x000D          if  xmlHttpRequestObject readyState    4  amp  amp  xmlHttpRequestObject status    200    x000D            document getElementById  txt1   innerHTML    200 Response received    x000D            else   x000D            document getElementById  txt1   innerHTML    200 Response failed    x000D            x000D          x000D        xmlHttpRequestObject send    x000D        else   x000D        window alert  Error creating XmlHttpRequest object  Client is not CORS enabled    x000D        x000D      x000D    x000D   lt html gt  x000D   lt head gt  x000D     lt title gt Check if page is cors lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt p gt A CORS-enabled source has one of the following HTTP headers  lt  p gt  x000D     lt ul gt  x000D       lt li gt Access-Control-Allow-Headers    lt  li gt  x000D       lt li gt Access-Control-Allow-Headers  x-requested-with lt  li gt  x000D     lt  ul gt  x000D     lt p gt Click a button to see if the page allows CORS lt  p gt  x000D     lt form name  form1  action    method  get  gt  x000D       lt input type  button  name  btn1  value  Check Google Page  onClick  checkCorsSource  google    gt  x000D       lt input type  button  name  btn1  value  Check Cors Page  onClick  checkCorsSource  cors    gt  x000D     lt  form gt  x000D     lt p id  txt1    gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This is a little late to the party  but I have been struggling with this for a couple of days   It is possible and none of the answers I found here have worked   It s deceptively simple  Here s the  ajax call    x000D   x000D       lt  DOCTYPE HTML gt  x000D       lt html gt  x000D       lt head gt  x000D       lt body gt  x000D        lt title gt Javascript Test lt  title gt  x000D        lt script src  http   code jquery com jquery-latest min js  gt  lt  script gt  x000D        lt script type  text javascript  gt  x000D         document  domain    XXX com   x000D         document  ready function      x000D         ajax   x000D          xhrFields   cors  false   x000D          type   GET   x000D          url   http   XXXX com test php email  steve XXX com    x000D          success  function  data    x000D             alert data   x000D             x000D          error  function  x  y  z    x000D             alert x responseText      EEE      x status   x000D            x000D          x000D          x000D       lt  script gt   x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D    Here s the php on the server side    x000D   x000D       lt html gt  x000D       lt head gt  x000D        lt title gt PHP Test lt  title gt  x000D        lt  head gt  x000D       lt body gt  x000D         lt  php x000D        header  Origin  xxx com    x000D        header  Access-Control-Allow-Origin      x000D         servername    sqlxxx   x000D         username    xxxx   x000D         password    sss   x000D         conn   new mysqli  servername   username   password   x000D        if   conn- gt connect error    x000D          die   Connection failed       conn- gt connect error   x000D          x000D         sql    SELECT email  status  userdata  FROM msi usersLive   x000D         result    conn- gt query  sql   x000D        if   result- gt num rows  gt  0    x000D        while  row    result- gt fetch assoc      x000D          echo  row  email            row  status            row  userdata        lt br gt    x000D          x000D        else   x000D        echo        x000D        x000D       conn- gt close    x000D        gt  x000D       lt  body gt  x000D   x000D   x000D

User · Answer

This is a summary of what worked for me   Define a new function  wrapped   ajax to simplify    jQuery postCORS   function url  data  func      if func    undefined  func   function        return   ajax       type   POST        url  url       data  data       dataType   json        contentType   application x-www-form-urlencoded        xhrFields    withCredentials  true         success  function res    func res          error  function                  func                      Usage     postCORS  https   example com service json    x   1   function obj         if obj ok                                 Also works with  done  fail etc     postCORS  https   example com service json    x   1    done function obj         if obj ok                              fail function        alert  Error           Server side  in this case where example com is hosted   set these headers  added some sample code in PHP    header  Access-Control-Allow-Origin  https   not-example com    header  Access-Control-Allow-Credentials  true    header  Access-Control-Max-Age  604800    header  Content-type  application json     array   array  ok    gt    POST  x     echo json encode  array     This is the only way I know to truly POST cross-domain from JS    JSONP converts the POST into GET which may display sensitive information at server logs

User · Answer

REQUEST      ajax               url   http   localhost 8079 students add                type   POST               crossDomain  true              data  JSON stringify somejson               dataType   json               success  function  response                    var resp   JSON parse response                  alert resp status                              error  function  xhr  status                    alert  error                                RESPONSE   response   HttpResponse json dumps    status     success      response   setitem    Content-type    application json   response   setitem    Access-Control-Allow-Origin         return response

User · Answer

I finally stumbled upon this link  A CORS POST request works from plain javascript  but why not with jQuery   that notes that jQuery 1 5 1 adds the    Access-Control-Request-Headers  x-requested-with   header to all CORS requests   jQuery 1 5 2 does not do this   Also  according to the same question  setting a server response header of   Access-Control-Allow-Headers      does not allow the response to continue   You need to ensure the response header specifically includes the required headers   ie    Access-Control-Allow-Headers  x-requested-with

User · Answer

Well I struggled with this issue for a couple of weeks   The easiest  most compliant and non hacky way to do this is to probably use a provider JavaScript API which does not make browser based calls and can handle Cross Origin requests   E g  Facebook JavaScript API and Google JS API   In case your API provider is not current and does not support Cross Origin Resource Origin     header in its response and does not have a JS api  Yes I am talking about you Yahoo   you are struck with one of three options-   Using jsonp in your requests which adds a callback function to your URL where you can handle your response  Caveat this will change the request URL so your API server must be equipped to handle the  callback  at the end of the URL  Send the request to your API server which is controller by you and is either in the same domain as the client or has Cross Origin Resource Sharing enabled from where you can proxy the request to the 3rd party API server  Probably most useful in cases where you are making OAuth requests and need to handle user interaction Haha  window open  url   newwindowname    blank    toolbar 0 location 0 menubar 0

[jquery] How to get a cross-origin resource sharing (CORS) post request working

Examples related to jquery

Examples related to ajax

Examples related to cherrypy

Examples related to cors