为啥我的 CORS 请求因 http 401 错误而失败

Posted 2023-03-04

【中文标题】为啥我的 CORS 请求因 http 401 错误而失败

【英文标题】：Why does my CORS request fail with http 401 error为什么我的 CORS 请求因 http 401 错误而失败

【发布时间】：2020-03-28 20:32:22

【问题描述】：

我正在使用 javascript 中的 Fetch API 从跨域 apache 服务器（由我控制）获取图像，但出现以下错误：

SEC7120：[CORS] 源“http://origin.com”在跨域资源 cross-origin.com/....jpg 的 Access-Control-Allow-Origin 响应标头中找不到“http://origin.com”

HTTP401: DENIED - 请求的资源需要用户身份验证。 (Fetch)GET cross-origin.com/….jpg

以下是创建请求对象以获取 jpg 的 javascript：

var authb64 = btoa(\'' . $xrefrec['ftp_username'] . ':' .                                   $xrefrec['ftp_password'] . '\');
const request = new Request(document.getElementById(thm.photo_id).href,
                                \'Access-Control-Request-Headers\': \'Authorization\',
                                \'Options\': \'* HTTP/1.1\',
                                \'Authorization\': \'Basic \' + authb64,
                                \'Origin\': \'http://origin.com\',
                                \'Credentials\': \'include\',
                                \'Cache\': \'no-cache\',
                                \'Mode\': \'cors\',
                                \'Method\': \'GET\'
                            );

代码创建一个锚标记，将请求传递给 fetch()，然后等待 Promise 解析。

在服务器上，我在图片所在的目录下设置了一个 .htaccess 文件，如下：

AuthName "Client Only"
AuthType Basic
AuthBasicProvider dbm
AuthDBMUserFile "C:/Bitnami/wampstack-7.3.11-0/apps/.../conf/.htdbm-users"
Require user (valid user id)
RewriteRule ^/(clientgalleries).*$/ $1 
Header set Access-Control-Allow-Methods "GET,OPTIONS"
Header set Access-Control-Allow-Credentials "true"
Header set Cache-Control no-cache
Header set Access-Control-Allow-Headers "Authorization,Access-Control-Allow-Origin"
Header set WWW-Authenticate: Basic
Header set Access-Control-Allow-Origin "http://origin.com"

【问题讨论】：

如果有人能帮我解决这个问题，我们将不胜感激。

【参考方案1】：

如果我理解正确，您正在尝试从未知域（您尚未共享它 - 没关系）向 origin.com 发出 CORS 请求。这是正确的吗？

您的 JavaScript 代码无法更改 Origin 标头。例如，如果您有来自 A.com 的 javascript 请求来自 B.com 的图像，则 B.com 必须在其 Access-Control-Allow-Origin 标头中允许 A.com。

【讨论】：

不，我正在从 origin.com 向 cross-origin.com 发出 cors 请求。

我应该补充一点，对 fetch() 的调用会引发异常，从而导致 401 错误。

然后反转域； cross-origin.com 必须在其 CORS 预检响应中使用适当的 Origin 白名单进行响应。

401 错误表明这不是 CORS，因为 CORS 是浏览器错误，不允许您发出 CORS 请求。

我可能没有说得很清楚，但是根据上面 .htaccess 中的最后一行，它是使用 Access-Control-Allow-Origin 标头响应的跨域服务器。跨度>