跨源 'Authorization'-header with jquery.ajax()

Question

我正在尝试发送一个跨源域并添加一个自定义的"Authorization"-标头。请参阅下面的代码。

错误：

XMLHttpRequest无法加载｛url｝。访问控制允许标头不允许请求标头字段"授权"。

function loadJson(from, to) {
    $.ajax({
        //this is a 'cross-origin' domain
        url : "http://localhost:2180/api/index.php",
        dataType : 'json',
        data : { handler : "statistic", from : from, to : to
        },
        beforeSend : setHeader,
        success : function(data) {
            alert("success");
        },
        error : function(jqXHR, textStatus, errorThrown) {
            alert("error");
        }
    });
}
function getToken() {
    var cookie = Cookie.getCookie(cookieName);
    var auth = jQuery.parseJSON(cookie);
    var token = "Token " + auth.id + ":" + auth.key;
}
function setHeader(xhr) {
    xhr.setRequestHeader('Authorization', getToken());
}

我也试过：

headers : { 'Authorization' : getToken() },

在ajax请求中。

可能是jquery ajax框架阻止了跨源身份验证吗？我该怎么解决这个问题？

更新：

顺便问一下：有没有一种更安全的方法将auth.key存储在客户端，然后存储在cookie中？getToken（）将被替换为一个更复杂的方法，对正文、日期等进行哈希处理。

Answer 1

这是一个发出CORS请求的示例。如果您有权访问服务器（我认为您有权这样做，因为这是对localhost的请求），您将需要添加CORS特定的响应标头。最简单的方法是添加以下响应头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Authorization

您的服务器还需要配置为响应HTTP OPTIONS请求。您可以在此处了解有关提出CORS请求的更多信息：http://www.html5rocks.com/en/tutorials/cors/