使用身份验证标头发出跨域请求答案

【问题标题】：Making a cross domain request with authentication header使用身份验证标头发出跨域请求
【发布时间】：2016-05-04 10:01:57
【问题描述】：

首先，服务器（不是我的）返回以下标头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

我正在尝试了解如何使用身份验证令牌将请求传递给站点。我在本地 apache 服务器上运行代码。

这是我的代码：

function get_data(){
    var url = '$URL';
    var x = new XMLHttpRequest();
    x.open("GET", url, true)
     if (x.readyState == 4 && x.status == 200) {
        var responseText = x.responseText;
        console.log(responseText)
        };
    x.setRequestHeader("Authentication", "Bearer $TOKEN");
    x.withCredentials = true
    x.send()
}

控制台返回：

XMLHttpRequest 无法加载 $URL。对预检请求的响应不通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。原点“http://localhost”是因此不允许访问。响应的 HTTP 状态代码为 403。

在阅读文档时，我看到不允许手动设置标题。当我删除x.setRequestHeader("Authentication", "Bearer $TOKEN");时，我确实得到了服务器的答复（显然是身份验证错误。）那么我该如何将这些信息添加到我的请求中呢？

服务器返回的标头：

Request URL:$serverurl
Request Method:OPTIONS
Status Code:403 Forbidden
Remote Address:$ipaddress
Response Headers
view source
Cache-Control:no-cache
Connection:close
Content-Type:text/html
Request Headers
view source
Accept:"*/*"
Accept-Encoding:gzip, deflate, sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:authentication
Access-Control-Request-Method:GET
Connection:keep-alive
Host:$host
Origin:http://localhost
Referer:http://localhost/mv.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36

【问题讨论】：

请解释“$URL”的含义。这是真实服务器 url 的令牌还是占位符？
类似$TOKEN -
出于隐私原因，我在此处替换了 url 和令牌，它们已正确放置在我的代码中。值得一提的是，我用 Python 编写了完全相同的脚本，没有任何问题。

标签： javascript api xmlhttprequest

【解决方案1】：

在您的实际 GET 请求之前，浏览器会发送一个 OPTION 请求，以检查其请求的“选项”（允许的方法、来源等）。

检查浏览器发送的选项请求（预检）的网络选项卡。此请求必须具有适当的响应标头，例如

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: POST, GET, OPTIONS

请看这里：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Methods

由于服务器为选项请求发送了 403 状态标头，这意味着服务器没有正确处理选项请求，或者只是为您的主机设置 403 作为安全措施。除非更改，否则您无法通过 XHR 访问该 api。

【讨论】：