为什么Fetch API get ch（）总是抛出异常？[重复]

Question

我正在尝试从跨域服务器检索图像。我在WAMP堆栈服务器上使用自签名证书，但无论我使用哪种标头，get ch（）总是在飞行前检查后抛出异常。以下是取自Chrome的请求/响应标头：

General
Request URL: https://starlightproductions.ddnsfree.com/clientgalleries/michael.laver.suncorp.com.au/Snapper/holycrap.jpg
Request Method: OPTIONS
Status Code: 401 Unauthorized
Remote Address: 220.237.95.254:443
Referrer Policy: strict-origin

Response Headers
Connection: Keep-Alive
Content-Length: 381
Content-Type: text/html; charset=iso-8859-1
Date: Wed, 11 Dec 2019 23:28:36 GMT
Keep-Alive: timeout=5, max=100
Server: Apache
WWW-Authenticate: Basic realm="Client Only"
X-Frame-Options: SAMEORIGIN

Request Headers
Date: Wed, 11 Dec 2019 23:28:36 GMT
Keep-Alive: timeout=5, max=100
Server: Apache
WWW-Authenticate: Basic realm="Client Only"
X-Frame-Options: SAMEORIGIN
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: authorization,content-type
Access-Control-Request-Method: GET
Connection: keep-alive
Host: starlightproductions.ddnsfree.com
Origin: http://dev.qwikfoto.com
Referer: http://dev.qwikfoto.com/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

这是调用get ch（）的javascript代码：

let hdr = new Headers();

hdr.append(\'Content-Type\', \'application/octet-stream\');
hdr.append(\'Accept\', \'application/octet-stream\');
hdr.append(\'Authorization\', \'Basic \' + window.btoa(\'' . $xrefrec['ftp_username'] . ':' .
        $xrefrec['ftp_password'] . '\'));
hdr.append(\'Origin\',\'http://dev.qwikfoto.com\');

const myresponse = await fetch(document.getElementById(thm.photo_id).href, {
    mode: \'cors\',
    credentials: \'include\',
    method: \'GET\',
    headers: hdr
});

以下是图像所在目录中 .htaccess 的标头：

Header set Access-Control-Allow-Methods: "GET, POST, OPTIONS"
Header set Access-Control-Allow-Credentials: true
Header set Cache-Control: no-cache
Header set Access-Control-Expose-Headers: "Content-Length"
Header set Access-Control-Allow-Headers: "*"
# Header set Access-Control-Allow-Headers: "Authorization, Origin, Content-Type, Accept, X-Auth-Token"
Header set WWW-Authenticate: "Basic realm='Client Only'"
Header set Access-Control-Allow-Origin: http://dev.qwikfoto.com
Header set Vary: Origin
Header set Access-Control-Max-Age: 84600

我已经为此工作了好几天。我什至尝试过在 apache 配置文件中使用 RewriteRule 指令强制使用 http 200 的响应代码。我真的很感激这里的一些帮助。

谢谢

Answer 1

好像问题出在你的自签证书上。

当涉及到< code>fetch和SSL时，< code>fetch的行为有点像用户使用浏览器时的行为，这意味着它不允许从无效或自签名的证书中提取资源，除非用户采取措施告诉浏览器可以这样做。

如果你正在构建一个面向用户的网站，我猜你将无法让你的用户采取手动步骤来允许浏览器这样做。

我最好的建议是使用像Let's Encrypt这样的东西来代替自签名证书。