本地主机和放置方法的 CORS 问题

Question

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.

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