为什么Fetch API fetch()总是抛出异常？

Question

我正在尝试从跨域服务器取回图像。我在WAMP堆栈服务器上使用自签名证书，但无论我使用哪个头文件，fetch()总是在飞行前检查后抛出异常。下面是取自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

下面是调用fetch()的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

似乎问题出在您的自签名证书上。

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

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

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