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.

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;

if the server doesn't accept cross origin, the crossdomain=true does not have to solve the issue. using dataType:"jsonp" and setting the callback like jsonpCallback: "response" would be the better idea to do this. See also: api.jquery.com/jquery.ajax
– BonifatiusKNov 13 '14 at 12:17

22

jsonp does not work for POST request
– Hassan ZaheerMay 20 '15 at 10:16

jquery version ok? did you set the withCredentials: true? you sure you have the relevant headers?
– DekelSep 18 '17 at 12:30

Yes, 1withCredential: true, jquery version: 3.2.1`. In fact it is working in through postman, but its not passing through chrome browser
– Mox ShahSep 18 '17 at 13:49

I'm almost sure postman should not have CORS problems because it isn't a browser and it's behavior is different. You sure you have the correct and relevant headers send from the server to the client? Again - note that this change is not enough. You need to make sure the server response with the correct headers.
– DekelSep 18 '17 at 17:35

Could you tell me what are the response header required on server ?
– Mox ShahSep 19 '17 at 5:02

@MoxShah this is a complete different question and there are a lot of resources there :)
– DekelSep 19 '17 at 15:06

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')

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: *.

There is no reason to add CORS headers to the request manually. The browser will always add the prop CORS headers to the request for you.
– Ray NicholusApr 13 '14 at 12:50

The real challenge is getting the server to reply with a correct Access-Control-Allow-Headers and JQ supplying correct Access-Control-Request-Headers (plus any you add via code) neither of which can be wildcards. it only takes one "bad" header to blow up the pre-flight, e.g. using If-None-Match for a conditional GET, if server does not have that listed.
– escape-llcJun 8 '17 at 17:36

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:

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.

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:

For what it's worth, the Origin header is a request header, not a response header. Your php script should not be setting it.
– NoodlesNov 24 '16 at 22:36

Hmmph. This got my hopes up and then dashed them when I saw you're making an AJAX "GET" in your code, when the OP quite clearly said he was trying to AVOID using "GET" and wanted to use "POST".
– Steve SauderMar 26 '17 at 5:22

CORS headers work the same regardless of the verb involved. We are able to invoke all verbs via $.ajax() against a correctly-configured server. The hardest part is getting the Access-Control-Request-Headers correct, but even that is not too difficult. As noted by previous posters, this must not be a wildcard but a whitelist of headers.
– escape-llcJun 8 '17 at 17:30