0

I'm trying to make a CORS requests to communicate between my client and server placed in two different domain.

The server headers has been set to the following -

Access-Control-Allow-Headers:Content-Type, Authorization, Content-Length, X-Requested-With Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS Access-Control-Allow-Origin:*

I can see the response header coming through if I hit the server url (http://server.com)

Now when I use jquery to send the data and method to the server to process and get back the data then I get the following

Failed to load http://server.com/event/live: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3016' is therefore not allowed access. The response had HTTP status code 502.

Jquery code is --

callMyAPI : function(pUrl,pType,pData,callback){
        var apiURL = API_HOST+pUrl;
        jQuery.ajax({
            xhr: function() {
                var xhr = jQuery.ajaxSettings.xhr();
                xhr.upload.onprogress = function(e) {
                    if (typeof callback == "function"){
                        var percentComplete = parseInt((e.loaded / e.total)*100);
                        callback('progress',percentComplete);
                    }   
                };
                xhr.addEventListener("progress", function(e){
                    if (typeof callback == "function"){
                        if (e.lengthComputable) {
                            var percentComplete = parseInt((e.loaded / e.total)*100);
                            callback('progress',percentComplete);
                        }
                    }   
                }, false);
                return xhr;
            },
            url: apiURL,
            data: pData,
            type: pType,
            beforeSend: function(xhr){
               xhr.withCredentials = true;
            },
            crossDomain: true,
            contentType: 'application/json',
            dataType: 'json',
            success: function(data) {
                if (typeof callback == "function"){
                    callback('success',data);
                }   
            },
            complete: function(){
                if (typeof callback == "function"){
                    callback('complete');
                }
            }
        }).fail(function(xhr, status, error) {
            if (typeof callback == "function"){
                callback('fail',error);
            }   
        });
    },

Any help is highly appreciated. Thanks in advance.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Prithviraj Mitra
  • 11,002
  • 13
  • 58
  • 99

1 Answers1

1

This has to do nothing with your jquery code. It is the browser that blocks the calls. I suggest that you ensure following,

  1. Same headers are coming on http://server.com/event/live route as mentioned.
  2. Try datatype as jsonp in xhr, if this fixes the problem, in that case it is certain that header response is not correct(either misspelled or something missing). jsonp is not recommended at all for type of project you are doing.
  3. Most importantly, if you are doing POST/PUT on that rout, ensure you respond back to OPTIONS type of calls (explore pre-flight calls)
theAnubhav
  • 535
  • 6
  • 16
  • When I tried with `curl -X OPTIONS http://api-host/event/live` then I get `curl: (52) Empty reply from server`. I need to see the nginx sites configuration file as it might be using proxy server. – Prithviraj Mitra Feb 17 '18 at 19:24
  • this is case #3, You aren't getting 405 which implies either nginx configuration is not allowing to reach the api server or api server is giving no response(OPTIONS response wrong). In Addition, please check headers as well of OPTIONS call – theAnubhav Feb 17 '18 at 19:29
  • Sorry I put a wrong api host. Now I am getting OPTIONS response. I can see the response headers -- `Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization, Content-Length, X-Requested-With` – Prithviraj Mitra Feb 17 '18 at 19:50
  • I used method PUT and looks okay. How can I see if there is any other blocking methods working. – Prithviraj Mitra Feb 17 '18 at 19:53
  • I presume by 'blocking methods' you mean same as PUT. So apart from PUT, POST, is one for which this headers are checked in pre-flight calls by browser. This headers are checked in all methods except OPTIONS/HEAD/TRACE – theAnubhav Feb 18 '18 at 05:58
  • I have PUT method working in other route but not for /event/live route. I have tested/event/live route through postman using put method and it returns true. – Prithviraj Mitra Feb 18 '18 at 17:54