未使用 .setRequestHeader 设置 XMLHttpRequest

Posted 2023-03-04

【中文标题】未使用 .setRequestHeader 设置 XMLHttpRequest

【英文标题】：XMLHttpRequest is not set by using .setRequestHeader

【发布时间】：2013-10-13 22:05:48

【问题描述】：

我尝试发出跨域请求。为了能够做到这一点，我必须设置一个 http 标头。

$.ajax(
                type: 'GET',
                url: 'api',
                beforeSend: function (request)
                
                    request.setRequestHeader('authorization', 'Basic ...==');
                ,
                success: function(data) 
                    debugger;
                
            );

beforeSend 方法似乎已被调用，但未设置“authorization”标头。你能帮我解决这个问题吗？

更新：这里是收到的 CORS 标头：

Access-Control-Allow-Origin : localhost
Access-Control-Allow-Credential: true
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS

似乎缺少 Access-Control-Allow-Headers。

【问题讨论】：

您确定您的 API 支持 CORS 吗？您在此处描述的症状强烈表明它没有。或者至少它不支持设置 Authorization 标头。确保您的 API 发送正确的 CORS 标头。另请查看 Google Chrome 的控制台以查看潜在错误。这就是发出此类警告的地方。

【参考方案1】：

确保您的 API 支持 CORS，并且 Authorization 是允许设置的请求标头。当您向端点发送 OPTIONS 请求时，您的 API 应使用以下响应标头进行响应：

Access-Control-Allow-Headers:X-Requested-With, Content-Type, Authorization
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*

这允许客户端在调用 API 方法时设置 X-Requested-With、Content-Type 和 Authorization 请求标头，并允许 GET、POST、PUT、DELETE、OPTIONS来自任何起源域的动词。

因此，为了调试问题，首先向您的 API 端点发送 OPTIONS 请求并观察响应 HTTP 标头。

【讨论】：

谢谢达林的回答！看起来服务器没有设置 Access-Control-Allow-Headers 标头。

这就是问题所在。在这种情况下，您无法执行跨域 AJAX 请求。