使用 ajax 发出 http 请求以获得基本授权和 cors

Question

我的 httpd 服务器111.111.111.111 （假设）的配置。
在/etc/httpd/conf/httpd.conf配置 cors 和基本身份验证。

<Directory "/var/www/html">
    Options Indexes FollowSymLinks
    AllowOverride AuthConfig
    Require all granted
    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
    Header always set Access-Control-Allow-Credentials "true"
    Header always set Access-Control-Allow-Headers "Authorization,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With"
</Directory>

在我的服务器111.111.111.111上为基本授权做一些更多的配置。

cd /var/www/html && vim .htaccess
AuthName "login"  
AuthType Basic  
AuthUserFile /var/www/html/passwd  
require user username

为用户名创建密码。

htpasswd -c /var/www/html/passwd username

使用以下命令重新启动 httpd：

systemctl restart httpd

服务器111.111.111.111上的/var/www/html/remote.html 。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
</head>
<body>
<p>it is a test </p>
</body>
</html>

用用户名和密码测试什么时候在浏览器中打开111.111.111.111\\remote.html?username=xxxx&password=xxxx 。

it is a test

使用 curl 获取响应标头。

curl -u xxxx:xxxx -I  http://111.111.111.111/remote.html
HTTP/1.1 200 OK
Date: Thu, 06 Sep 2018 00:59:56 GMT
Server: Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/5.4.16
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization,X-PINGOTHER,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With
Last-Modified: Wed, 05 Sep 2018 15:01:05 GMT
ETag: "f5-575210b30e3cb"
Accept-Ranges: bytes
Content-Length: 245
Content-Type: text/html; charset=UTF-8

在 header 中添加参数OPTIONS 。

curl -X OPTIONS -i http://111.111.111.111/remote.html

HTTP/1.1 401 Unauthorized
Date: Thu, 06 Sep 2018 06:42:04 GMT
Server: Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/5.4.16
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization,X-PINGOTHER,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With
WWW-Authenticate: Basic realm="please login"
Content-Length: 381
Content-Type: text/html; charset=iso-8859-1

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>401 Unauthorized</title>
</head><body>
<h1>Unauthorized</h1>
<p>This server could not verify that you
are authorized to access the document
requested.  Either you supplied the wrong
credentials (e.g., bad password), or your
browser doesn't understand how to supply
the credentials required.</p>
</body></html>

在标题中添加OPTIONS和基本授权。

curl -X OPTIONS -u xxxx:xxxxx  -i http://111.111.111.111/remote.html

HTTP/1.1 200 OK
Date: Thu, 06 Sep 2018 06:42:54 GMT
Server: Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/5.4.16
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization,X-PINGOTHER,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With
Allow: POST,OPTIONS,GET,HEAD,TRACE
Content-Length: 0
Content-Type: text/html; charset=UTF-8

好的，一切都很好。
我们来试试ajax的基本授权。

我本地 apache 上的/var/www/html/test.html 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script src="http://127.0.0.1/jquery-3.3.1.js"></script>
    <script>
    function Ajax( ) {
        var url = 'http://111.111.111.111/remote.html';
        $.ajax(url, {
            type:"get",
            dataType: 'html',
            withCredentials: true,
            username: "xxxx",
            password: "xxxx",
            success:function(response){
                mytext = $("#remote");
                mytext.append(response);
            },
            error: function (e) {
                alert("error");
            }    
        });
    };
    </script>

    <input type="button" value="show content" onclick="Ajax();">
    <p id="remote">the content on remote webpage</p>
</body>
</html>

要在输入127.0.0.1/test.html时单击show content按钮，我收到错误消息：

GET http://111.111.111.111/remote.html 401 (Unauthorized)

我已经根据httpd设置（centos7）和ajax等相关问题进行了详细说明，请下载我的代码并保存在你的vps和本地htdocs目录下，用你的真实ip替换ip，重现过程。
我恳求您在重现该过程之前不要发表任何评论。
你可能会发现发生了什么，也许这里和我的一样。

问题中的两个重要因素。
1.httpd 文件/etc/httpd/conf/httpd.conf设置。
2.ajax代码
哪一个是错的？
如何解决？

感谢@sideshowbarker，我有了一些解决问题的线索。

原因

问题变成了另一个：
如何将 apache 配置为不需要 OPTIONS 请求的授权？
我试过Disable authentication for HTTP OPTIONS method (preflight request)说。

禁用 HTTP OPTIONS 方法的身份验证（预检请求）e

<Directory "/var/www/html">
<LimitExcept OPTIONS>
  Require valid-user
</LimitExcept>
</Directory>

systemctl restart httpd ，失败。

Answer 1

如果您console.log错误，您将看到一条消息：

无法加载http://111.111.111.111/remote.html ：当请求的凭据模式为 'include'时，响应中的'Access-Control-Allow-Origin'标头的值不能是通配符 '* ' 。 因此不允许访问源“ http://127.0.0.1/ ”。 XMLHttpRequest发起的请求的凭证模式由withCredentials属性控制。

这是为了防止 CSRF 攻击。

例如，如果在这种情况下可以使用通配符：Malicious- SiteA可以通过浏览器启动的 ajax reqests未经授权访问目标SiteB上的特权资源，只是因为受害者在某个时候为SiteB提供了凭据，而他在受信任的SiteC 。

所以解决方案是将Access-Control-Allow-Origin从“*”更改为“ http://127.0.0.1 ”，（上例中的SiteC地址）

现在为了让curl -X OPTIONS -i http://111.111.111.111/remote.html在保持其他方法的主动身份验证的同时工作，您需要将以下内容添加到.htaccess或httpd.conf ：

<LimitExcept OPTIONS>
   AuthName "login"
   AuthType Basic
   AuthBasicProvider file
   AuthUserFile /var/www/cors-auth.passwd
   Require user username
 </LimitExcept>

编辑：

如果您需要预先填写用户名/密码（如您的情况），而不是期望浏览器提示对话框，则需要LimitExcept OPTIONS 。但是为了让它在所有浏览器（chrome/ff/edge）上都能工作，我不得不替换这个：

        withCredentials: true,
        username: "xxxx",
        password: "xxxx",

有了这个：

      beforeSend: function (xhr){ 
           xhr.setRequestHeader('Authorization', "Basic " + btoa("xxxx:xxxx")); 
       },

Answer 2

尝试放置 localhost 而不是 ' http://111.111.111.111/remote.html '

' http://localhost/remote.html 。它应该可以工作。这可能是您的公共 IP 地址问题，其中端口 80 未打开。

使用 ajax 发出 http 请求以获得基本授权和 cors

问题描述

2 个解决方案

解决方案1
3 2018-09-11 16:37:44

解决方案2
1 2018-09-11 15:08:28

使用 ajax 发出 http 请求以获得基本授权和 cors

问题描述

2 个解决方案

解决方案1 3 2018-09-11 16:37:44

解决方案2 1 2018-09-11 15:08:28

解决方案1
3 2018-09-11 16:37:44

解决方案2
1 2018-09-11 15:08:28