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

Question

我正在使用 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"

Answer 1

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

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