CORS问题与localhost和put方法有关

时间:2018-02-17 18:37:12

标签: javascript jquery api cors

我正在尝试在我的客户端和位于两个不同域的服务器之间进行CORS请求。

服务器标头已设置为以下内容 -

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

如果我点击服务器网址(http://server.com

,我可以看到响应标头

现在,当我使用jquery将数据和方法发送到服务器进行处理并获取数据时,我得到以下内容

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代码是 -

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);
            }   
        });
    },

非常感谢任何帮助。提前谢谢。

1 个答案:

答案 0 :(得分:0)

这与你的jquery代码无关。是阻止呼叫的浏览器。 我建议您确保关注,

  1. 如前所述,http://server.com/event/live路径上出现了相同的标头。
  2. 在xhr中尝试将数据类型设置为jsonp,如果这样可以解决问题,那么可以确定标头响应不正确(拼写错误或缺少某些内容)。对于您正在进行的项目类型,建议不要使用jsonp。
  3. 最重要的是,如果您正在对该溃败进行POST / PUT,请确保您回复OPTIONS类型的呼叫(探索飞行前呼叫)