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。 Access-Control-Allow-Headers添加了授权。 xhr.status返回0并且responseText / thrownError为空。

Answer 1

JSONP！= ajax

您正在做的这些请求只是向您的DOM添加<script>标记。它只是用ajax语法包装，易于使用。您无法以这种方式修改请求标头。您需要创建一个CORS ajax请求，并配置您的服务器来处理它们。

虽然在同一个域上执行jsonp请求但我相信jQuery只使用xmlHttpRequest。对于跨域，它使用<script>标记。这可以解释你所看到的行为。

请考虑以下事项。

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

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

带有承载身份验证的跨域ajax错误 - 401未经授权

1 个答案: