Ajax cross domain GET works, PUT/POST gets cross domain error

Question

Pretty much what the title says. I have an ajax call that works well on GET but PUT gives me the Cross Domain Error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://myDomainPC:6764/Forms/MyAction/2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Here's the code. The url of the call goes to

"http://myDomainPC:6764/Forms/MyAction/" + (InspectionID != 0 ? InspectionID : "")

The inspection ID has a default value of 0 if it is not passed in via query string.

I've added the extended headers property based on this SO post (but no change): jquery $.ajax cross-domain GET works but not POST

$.ajax({
    url: ajaxDataSaveInspectionURL,
    data: pageHeader,
    dataType: "json",
    type: "PUT",
    crossDomain: true,
    headers: {  "Access-Control-Allow-Origin": "*", 
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
    "Access-Control-Allow-Headers": "accept, origin, authorization, content-type, content-length, connection, x-requested-with, user-agent"},
    contentType: "application/json",
    success: function(result){
        //do stuff here
    },
    error: function(xhr, settings){
        switch (xhr.status) {
            case 404: //and other statuses...
                //do stuff here
                break;                
        }
    }).done(function (data) {
           //do stuff here too
    });

Another developer has confirmed that the API we're calling is set up properly to accept requests from anywhere.

What's going on here that I need to change to get something besides an error?

let me guess the website is hosted on a shared hosting server right ? — Abslen Char, Mar 19 '18 at 18:36
Is it your server sitting at: ajaxDataSaveInspectionURL? If so you need to set your server to send proper CORS headers not your client. A workaround for CORS issues can also be a local proxy in your application code. — MichaelWClark, Mar 19 '18 at 18:45
Why are you setting all those sever-side headers on the client? Does the API require you to set a contentType? you shouldn't if it doesn't, as that would force a preflight to occur. — Kevin B, Mar 19 '18 at 18:55
Possible duplicate of [Unable to make PUT/POST/DELETE HTTP Call using CORS in JQuery 1.6.4](https://stackoverflow.com/questions/7587812/unable-to-make-put-post-delete-http-call-using-cors-in-jquery-1-6-4) — Heretic Monkey, Mar 19 '18 at 20:05

score -1 · Answer 1 · answered Mar 19 '18 at 18:36

Access-control-allow headers (CORS headers) are response headers which should be set by the service you are making request to. In your case the API. There's no need for you to set them as request headers when making ajax call.

You can read more about CORS here https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Cheers!

user4593252 · Accepted Answer · 2018-03-19T20:28:03.810

After a lot of investigation, it turns out that the problem is two-fold:

The data payload contains several DateTime fields which are not getting the "T" between the date and time parts. This means that it cannot be deserialized into a DateTime object. It therefore generates a 500 error.
The service is written in .Net Core. Because the DateTime values do not deserialize correctly, it throws in code where it can't(?) be handled by the service, thereby generating an error which does not covey to the consumer correctly and does not deliver a correct 500 with a body and does not apply the correct permissions on the service. This is a .Net Core issue, not an issue with the code.

Ajax cross domain GET works, PUT/POST gets cross domain error

2 Answers2