带有 jquery.ajax() 的跨域“授权”标头

Posted 2023-02-27

【中文标题】带有 jquery.ajax() 的跨域“授权”标头

【英文标题】：cross-origin 'Authorization'-header with jquery.ajax()

【发布时间】：2012-03-22 12:42:18

【问题描述】：

我正在尝试发送跨域域并添加自定义“授权”标头。 请看下面的代码。

错误：

XMLHttpRequest 无法加载 url。 Access-Control-Allow-Headers 不允许请求头域 Authorization。

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() 将被替换为更复杂的方法，对正文、日期等进行哈希处理。

【问题讨论】：

你的getToken()method 没有返回任何东西。

【参考方案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/

【讨论】：

嗯.. 我忘记了这三个标题中的最后一个。我只是发送来源和方法。愚蠢的错误。 :) 是的，我实现了 OPTIONS。好链接！谢谢

根据 MDN，当使用凭证请求而不是通配符时，需要将 Access-Control-Allow-Origin 标头设置为来源。

@radicalmatt，是的，他也写在那里 ***.com/a/15254158/632951 ：“当 Access-Control-Allow 时，值 * 不能用于 Access-Control-Allow-Origin 标头-凭据为真"