具有持有者身份验证的跨域 ajax 错误 - 401 未经授权

Question

所以... 我正在进行跨域 （CORS） 调用。当我最初在页面上制作它时，它工作得很好（请注意跨域问题并不是真正的问题），但是当我稍后向同一服务器发出另一个请求时，将持有者授权令牌添加到标头，它失败了 401 未经授权。

此外，当我从同一域运行此代码时，两个调用都成功运行（确定令牌正常......

思潮？

$.ajax({
  url: apiPath.userMetaUrl(),
  xhrFields: { 
    withCredentials: true 
  },
  cache: false,
  error: function (xhr, ajaxOptions, thrownError) {
    console.log("url: " + apiPath.userMetaUrl());
    console.log("fn loadUserMetaData xhr.status: " + xhr.status);
    console.log("fn loadUserMetaData xhr.responseText: " + xhr.responseText);
    console.log("fn loadUserMetaData thrownError: " + thrownError);
  },
  dataType: "json",
  jsonpCallback: "callback",
  beforeSend : setHeader,
  success: function (data) {
    //woohoo!
  }
}
function setHeader(xhr) {
  xhr.setRequestHeader('Authorization', 'Bearer ' + authenticatedInfo.access_token);
}

同样，从与 apiPath.userMetaURL（） 相同的域运行此代码可以正常工作。在不同的域上，不添加请求标头的初始调用工作正常。Access-Control-Allow-Orign 添加了跨域 URL。访问控制允许标头已添加授权。xhr.status 返回 0，responseText/thrownError 为空。

Answer 1

JSONP ！= ajax

您发出的这些请求只是将<script>标签添加到您的 DOM 中。它只是包装在 ajax 语法中以方便使用。不能以这种方式修改请求标头。您需要创建一个 CORS ajax 请求，并配置您的服务器来处理它们。

不过在同一域上执行 jsonp 请求...我相信jQuery只是使用xmlHttpRequest。对于跨域，它使用<script>标记。这将解释您所看到的行为。

请考虑以下事项。

$.ajax({
    url: 'http://google.com', 
    dataType: 'jsonp', 
    beforeSend: function(xhr) { xhr.setRequestHeader('foo', 'bar'); }
});

查看您的网络流量。它将创建请求，但您不会看到 foo 标头。