http - 如何使XMLHttpRequest跨域withCredentials，HTTP授权(CORS)？

Question

我无法使用授权 header 发出跨域请求(使用 Firefox 进行测试)。我的请求在没有身份验证的情况下工作，但是一旦我将 withCredentials 设置为 true，我就无法再从服务器读取响应。

在服务器上，我发回这些 header (使用 Flask 中的 after_request 方法):

resp.headers['Access-Control-Allow-Origin'] = '*'
resp.headers['Access-Control-Allow-Credentials'] = 'true'
resp.headers['Access-Control-Allow-Methods'] = 'POST, OPTIONS'
resp.headers['Access-Control-Allow-Headers'] = 'Authorization'

Firefox 实际上从未进行过 OPTIONS 调用。在客户端上，我进行了 XMLHttpRequest 调用:

var xhr = new XMLHttpRequest()
xhr.open( 'POST', 'http://test.local:8002/test/upload', true)
xhr.withCredentials = true
xhr.onreadystatechange = function() {
    console.log( xhr.status, xhr.statusText )
}
xhr.send(fd)

如果未设置 withCredentials，则日志语句会将预期信息记录到控制台。一旦我设置了值，但是 xhr 不允许访问，我只写了一个 0 值和一个空字符串。我没有在这里设置授权 header ，但这不应该影响我读取结果的能力。

如果我尝试将用户名/密码添加到“打开”命令，我会收到一个 NS_ERROR_DOM_BAD_URI: Access to restricted URI denied 错误。

我做错了什么？

Answer 1

我有 written an article具有完整的 CORS 设置。

我发现了几个可能导致此问题的问题:

1. 如果使用凭据，Access-Control-Allow-Origin 不能是通配符。最简单的方法是将请求的 Origin header 复制到此字段。完全不清楚为什么该标准不允许使用通配符。
2. Firefox 缓存访问控制结果，即使您清除了缓存(可能针对 session )。重新启动迫使它执行新的 OPTIONS 请求。为了帮助调试，我添加了 header Access-Control-Max-Age: 1
3. open 命令的用户名/密码显然不能用作凭据。您必须自己添加 Authorization header 。 xhr.setRequestHeader( 'Authorization', 'Basic ' + btoa( user + ':' + pass ) )

总体而言，withCredentials 系统相当脑残。简单地编写一个服务器来接受授权作为请求正文的一部分会更容易。