javascript - CORS - Ajax 或 XMLHttpRequest 类型 GET 与 "Authorization"获取错误 307

Question

我需要在 header 中执行带有“授权”的 CORS 请求类型 GET，但由于某种原因它不起作用...我收到 307 内部重定向，错误为“预检响应无效(重定向)”或者我得到如果使用 HTTPS，则 401 未经授权。

我尝试过这个:

$.ajax({
     url: "http://exemple.com/api/ajax.php",
     type: "GET",
       withCredentials: true, 
       crossDomain: true,
       dataType: 'jsonp',
       beforeSend: function(xhr){xhr.setRequestHeader('Authorization', 'Bearer A5MjE2DA1LCJzaWduIjoiZGJYTExNjM==');},
       success: function() { 
       alert('Success!' + xhr.responseText);}
  });

还有这个:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://exemple.com/api/ajax.php", true);
xhr.setRequestHeader("Authorization", "Bearer A5MjE2DA1LCJzaWduIjoiZGJYTExNjM==");
xhr.onload = function () {
    console.log(xhr.responseText);
};
xhr.send();

出现错误 307 内部重定向，错误为“预检响应无效(重定向)”

然后服务器端看起来没问题 ("Access-Control-Allow-Origin: *"); 那么出了什么问题呢？如何做到这一点？

Answer 1

您的请求未通过 CORS 预检检查。使用 307 重定向，服务器不会响应预检 OPTIONS 请求并进行重定向。

您需要配置服务器才能正确实现 CORS。有很多图书馆可以做到这一点。但如果您知道如何操作，则可以手动执行此操作。

服务器需要响应 OPTIONS 动词并使用 CORS header 进行回复。在预检中，允许来源必须是绝对的，并且不允许使用通配符。对于允许方法返回 GET。对于允许 header 返回授权。如果您使用凭据 (cookie)，请将“Allow-Credentials”设置为 True。

您的预检标题应如下所示:

Cross-Origin-Allow-Origin: http://example.com
Cross-Origin-Allow-Methods: GET
Cross-Origin-Allow-Headers: Authorization
Cross-Origin-Allow-Credentials: True