Cross domain AJAX request failing

Question

I'm trying to make a cross domain ajax request i have set the PHP headers on the receiving end and set the jQuery AJAX request but for some reason it works then you refresh the page and it fires a cors origin error with a response code of 503 which from my research its caused by CORS.

I have followed some instructions from here How do I send a cross-domain POST request via JavaScript?

Headers for api.mydomain.co.uk

header('Access-Control-Allow-Origin: https://mydomain.co.uk');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

jQuery for mydomin.co.uk

$.ajax({
    type: 'POST',
    url: "//api.mydomain.co.uk/application/mp/basket",
    crossDomain: true,
    xhrFields:{withCredentials: true},
    data: {Route: "ItemCount"},
    success: function(data) {
        $('.count').text(data);
    }
});

Browser Response

Can you post a capture of the request that results in a 503 response? — Halcyon, Sep 22 '17 at 15:53
Hi sorry im a bit of a first timer with this, would that be the PHP function that i use or the header response? — James, Sep 22 '17 at 15:58
`crossDomain: true` doesn't do what you think it does. It spoofs a cross-domain request when there isn't one. If your request is _actually_ crossdomain already, then you shouldn't use it. Read the jquery ajax docs. — ADyson, Sep 22 '17 at 16:00
@James just the request your browser makes. Like, take screenshot of the request in Chrome webdev or smth. — Halcyon, Sep 22 '17 at 16:01
@Halcyon as requested this is the capture of the browser dev — James, Sep 22 '17 at 16:06
Just so you know, you have exposed your domain in the screenshots — ProEvilz, Sep 22 '17 at 16:11
CORS config doesn’t cause 503 errors. A 503 is simply a Service Unavailable error. It’s typically an indication that something the server relies on to service your request is not available as expected. In contrast, the only difference in server behavior that CORS config ever creates is to cause the server to send some additional headers. That’s it. CORS config doesn’t rely on expecting some additional service to be available. Anyway what happens if you use curl or postman or whatever to send the same POST request to `https//api.mydomain.co.uk/application/mp/basket`? — sideshowbarker, Sep 22 '17 at 17:24
OK I tested by sending some POST requests to your server, and I was able to reproduce the 503 just about every one out of three times I send a request. So it’s some intermittent problem with the server. One time the server will respond to the POST with a 200 OK but the next time it might respond with that 503: *“The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.”* — sideshowbarker, Sep 22 '17 at 17:36
@sideshowbarker going on what you said i have sent a request using postman and the status code i get everytime is 200 this is an indecation on what you have said it seems that something serverside is causing a 503 but also on the browser console its showing about the cors is blocked due to the Access-Control-Allow-Origin is missing but it is infact present in the code. — James, Sep 22 '17 at 17:41
The only reason the browser shows you a message about Access-Control-Allow-Origin being missing is that nginx by default doesn’t add any responses headers to 5xx responses. Instead it only adds headers to 2xx success messages. If you want nginx to add the Access-Control-Allow-Origin header to responses, then you have to use `add_header` with the `always` keyword: `add_header Access-Control-Allow-Origin https://mydomain.co.uk always`. But there’s basically no point in adding that header to 5xx messages — because the problem is the 5xx error. Sending CORS headers with it doesn’t fix that — sideshowbarker, Sep 22 '17 at 17:47

score 1 · Answer 1 · answered Sep 22 '17 at 19:10

1

It turns out that some Plesk installations are a bit buggy and the 503 error comes from the proxy_fcgi apache process.

To temporaraily fix this error you need to set your application in plesk to use FastCGI instead of FPM served by Apache/Nginx.

answered Sep 22 '17 at 19:10

James

61
1
9

score 0 · Answer 2 · answered Sep 22 '17 at 15:55

0

I once had this issue and I solved by this, I created an .htaccess file in the target website I was trying to access.

<IfModule mod_headers.c>
    SetEnvIf Origin "http(s)?://(www\.)?(mydomain)$" AccessControlAllowOrigin=$0$1
    Header add Access-Control-Allow-Origin *
</IfModule>

Its an IF condition if the domain which is requesting has mydomain in it then it will allow you to access.

answered Sep 22 '17 at 15:55

Umair Ayub

19,358
14
72
146

This what the PHP code should do. I doubt it fixes the 503. – Halcyon Sep 22 '17 at 15:59

score 0 · Answer 3 · answered Sep 22 '17 at 17:02

The CORS policy should also specify which headers you can send.

The 503 is a little bit strange. I think you need to set Content-Type in the list of allowed headers, and maybe others. According to MDN these: https://developer.mozilla.org/en-US/docs/Glossary/simple_header are the headers that you don't need to explicitly send

header('Access-Control-Allow-Headers: Content-Type, etc');

Cross domain AJAX request failing

3 Answers3