假设我有两台服务器:服务器 A 和服务器 B。服务器 A 托管以下页面:

<html> 
  <head> 
    <script type="text/javascript"> 
      var http = new XMLHttpRequest(); 
      console.log("XML Request object created."); 
 
      http.open("POST", 'https://serverb.com/file', true, 'user', 'pass'); 
 
      http.onreadystatechange = function() { 
        console.log("readystatechange: "+http.status+":"+http.readyState); 
        if (http.status == 200 && http.readyState == 4) { 
          alert(http.responseText); 
        } 
      } 
 
      http.send(); 
      console.log("http request sent."); 
    </script> 
  </head> 
</html> 

使用以下 Apache2 配置:

LoadModule ssl_module modules/mod_ssl.so 
LoadModule headers_module modules/mod_headers.so 
 
Listen 443 
<VirtualHost *:443> 
 
        Header always append Access-Control-Allow-Origin: "*" 
        Header set Access-Control-Allow-Credentials true 
 
        ServerAdmin webmaster@localhost 
        DocumentRoot /var/www/html 
 
        ErrorLog ${APACHE_LOG_DIR}/error.log 
        CustomLog ${APACHE_LOG_DIR}/access.log combined 
 
        SSLEngine on 
        SSLCertificateFile "/home/vtcakavsmoace/Documents/webpass/cert.pem" 
        SSLCertificateKeyFile "/home/vtcakavsmoace/Documents/webpass/key.pem" 
 
</VirtualHost> 

服务器 B 托管一个名为"file"的文件并具有以下 Apache2 配置:

LoadModule ssl_module modules/mod_ssl.so 
LoadModule headers_module modules/mod_headers.so 
 
Listen 443 
<VirtualHost *:443> 
 
    Header always append Access-Control-Allow-Origin: "*" 
    Header set Access-Control-Allow-Credentials true 
 
    ServerAdmin webmaster@localhost 
    DocumentRoot /var/www/files 
    ErrorLog ${APACHE_LOG_DIR}/error.log 
    CustomLog ${APACHE_LOG_DIR}/access.log combined 
 
    <Directory "/var/www/files"> 
        AuthType Basic 
        AuthName "Restricted Content" 
        AuthUserFile /etc/apache2/.htpasswd 
        Require valid-user 
    </Directory> 
</VirtualHost> 

服务器希望对名为“user”且密码为“pass”的用户进行 HTTP 身份验证。

但是,每当有人连接到服务器 A 时,他们都会收到以下错误:

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied 

表示 Access-Control-Allow-Origin 不在 header 中。对于任何一台服务器,情况都不是这样。如果这不是问题,我还尝试通过命令行 curl 信息,结果成功了。我还尝试将 http.open 行更改为:

http.open("POST", 'https://user:pass@serverb.com/file', true); 

但这也失败了。

我在这里做错了什么?

编辑:

如果有帮助,这里是 curl --verbose --head -u 'user:pass' https://serverb.com/file 的输出:

*   Trying <redacted>... 
* Connected to <redacted> (<redacted>) port 443 (#0) 
* found 173 certificates in /etc/ssl/certs/ca-certificates.crt 
* found 697 certificates in /etc/ssl/certs 
* ALPN, offering http/1.1 
* SSL connection using TLS1.2 / ECDHE_RSA_AES_128_GCM_SHA256 
*    server certificate verification OK 
*    server certificate status verification SKIPPED 
*    common name: <redacted> (matched) 
*    server certificate expiration date OK 
*    server certificate activation date OK 
*    certificate public key: RSA 
*    certificate version: #3 
*    subject: OU=<redacted>,OU=See www.rapidssl.com/resources/cps (c)15,OU=Domain Control Validated - RapidSSL(R),CN=<redacted> 
*    start date: Wed, 06 May 2015 13:02:37 GMT 
*    expire date: Mon, 08 May 2017 08:52:24 GMT 
*    issuer: C=US,O=GeoTrust Inc.,CN=RapidSSL SHA256 CA - G3 
*    compression: NULL 
* ALPN, server did not agree to a protocol 
* Server auth using Basic with user '<redacted>' 
> HEAD /<redacted>/file HTTP/1.1 
> Host: <redacted> 
> Authorization: Basic <redacted> 
> User-Agent: curl/7.47.0 
> Accept: */* 
>  
< HTTP/1.1 200 OK 
HTTP/1.1 200 OK 
< Date: Wed, 10 Aug 2016 11:30:36 GMT 
Date: Wed, 10 Aug 2016 11:30:36 GMT 
< Server: Apache/2.4.7 (Ubuntu) 
Server: Apache/2.4.7 (Ubuntu) 
< Access-Control-Allow-Origin: * 
Access-Control-Allow-Origin: * 
< Last-Modified: Tue, 09 Aug 2016 11:36:29 GMT 
Last-Modified: Tue, 09 Aug 2016 11:36:29 GMT 
< ETag: "<redacted>" 
ETag: "<redacted>" 
< Accept-Ranges: bytes 
Accept-Ranges: bytes 
< Content-Length: 45377 
Content-Length: 45377 
< Access-Control-Allow-Credentials: true 
Access-Control-Allow-Credentials: true 
< Content-Type: application/<redacted> 
Content-Type: application/<redacted> 
 
<  
* Connection #0 to host <redacted> left intact 

编辑 2:

我进一步修改了代码。网页中的脚本现在如下:

var http = new XMLHttpRequest(); 
console.log("XML Request object created."); 
 
http.open("POST", 'https://serverb.com/file', true); 
 
http.withCredentials = true; 
 
http.setRequestHeader('Authorization', 'Basic '+btoa('user:pass')); 
 
http.onreadystatechange = function() { 
  console.log("readystatechange: "+http.status+":"+http.readyState); 
  if (http.status == 200 && http.readyState == 4) { 
    alert(http.responseText);       } 
  } 
 
http.send(); 
console.log("http request sent."); 

现在,我得到的不是简单地拒绝请求,而是服务器端的 401 状态和客户端的 0 状态,这意味着凭据不正确,即使它们是正确的。

编辑 3:

以下编辑会在 Chrome 中打开身份验证面板,但在 Firefox 中会抛出 NS_ERROR_DOM_BAD_URI: Access to restricted URI denied 错误。

var http = new XMLHttpRequest(); 
console.log("XML Request object created."); 
 
http.open("GET", 'https://serverb.com/file', true, 'user', 'pass'); 
 
http.withCredentials = true; 
 
http.onreadystatechange = function() { 
  console.log("readystatechange: "+http.status+":"+http.readyState); 
  if (http.status == 200 && http.readyState == 4) { 
    alert(http.responseText); 
  } 
} 
 
http.send(); 
console.log("http request sent."); 

请您参考如下方法:

好吧,我想出了一些解决方法。

由于 CORS 导致我出现 NS_ERROR_DOM_BAD_URI: Access to restricted URI denied 问题,我摆脱了 CORS 并开始在 Apache2 配置中转发请求。

index.html 最终版本:

<html> 
  <head> 
    <script type="text/javascript"> 
      var http = new XMLHttpRequest(); 
      console.log("XML Request object created."); 
 
      http.open("POST", 'file', true); 
 
      http.onreadystatechange = function() { 
        console.log("readystatechange: "+http.status+":"+http.readyState); 
        if (http.status == 200 && http.readyState == 4) { 
          alert(http.responseText); 
        } 
      } 
 
      http.send(); 
      console.log("http request sent."); 
    </script> 
  </head> 
</html> 

服务器A最终配置:

LoadModule ssl_module modules/mod_ssl.so 
LoadModule headers_module modules/mod_headers.so 
LoadModule rewrite_module modules/mod_rewrite.c 
LoadModule proxy_module modules/mod_proxy.so 
LoadModule proxy_http_module modules/mod_proxy_http.so 
LoadModule auth_basic_module modules/mod_auth_basic.c 
 
Listen 443 
<VirtualHost *:443> 
 
        Header always append Access-Control-Allow-Origin: "*" 
        Header set Access-Control-Allow-Credentials true 
 
        ServerAdmin webmaster@localhost 
        DocumentRoot /var/www/html 
 
        ErrorLog ${APACHE_LOG_DIR}/error.log 
        CustomLog ${APACHE_LOG_DIR}/access.log combined 
 
        SSLEngine on 
        SSLCertificateFile "/path/to/cert.pem" 
        SSLCertificateKeyFile "/path/to/key.pem" 
 
        ProxyRequests Off 
        <Proxy *> 
                Order deny,allow 
                Allow from all 
        </Proxy> 
 
        SSLProxyEngine On 
        SSLProxyCheckPeerCN on 
        SSLProxyCheckPeerExpire on 
 
        # Adding a prefix for googling purposes. 
        ProxyPassMatch "^/(prefix.*file.*.jpg)$" "https://serverb.com/$1" 
        ProxyPassReverse "/" "https://serverb.com/" 
 
        <LocationMatch "^/prefix.*file.*.jpg$"> 
 
            # Pass the credentials 
            AuthBasicFake "user" "pass" 
            Order allow,deny 
            Allow from all 
 
        </LocationMatch> 
</VirtualHost> 

服务器 B 最终配置:

LoadModule ssl_module modules/mod_ssl.so 
LoadModule headers_module modules/mod_headers.so 
 
Listen 443 
<VirtualHost *:443> 
 
    Header always append Access-Control-Allow-Origin: "*" 
    Header set Access-Control-Allow-Credentials true 
 
    ServerAdmin webmaster@localhost 
    DocumentRoot /var/www/files 
    ErrorLog ${APACHE_LOG_DIR}/error.log 
    CustomLog ${APACHE_LOG_DIR}/access.log combined 
 
    <Directory "/var/www/files"> 
        AuthType Basic 
        AuthName "Restricted Content" 
        AuthUserFile /etc/apache2/.htpasswd 
        Require valid-user 
    </Directory> 
</VirtualHost> 

此方法的另一个好处是最终用户永远不会看到密码,因此不会泄露授权。


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!