个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 02:47:05 33 4
gpt4 key购买 nike

我的 httpd 服务器 111.111.111.111 的配置(假设)。
在 /etc/httpd/conf/httpd.conf 中配置 cors 和 basic auth。

<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>

在header中添加OPTIONS和basic authorization

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)

enter image description here

我已经根据httpd设置(centos7)和ajax以及其他相关问题给出了详细描述，请下载我的代码并将其保存在您的vps和本地htdocs目录中，将ip替换为您的真实ip，重现该过程.
我求求你在重现这个过程之前不要发表任何评论。
你可能会发现发生了什么，也许它和我这里的一样。

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

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

reason

问题变成另一个:
如何配置 apache 不需要对 OPTIONS 请求进行授权？
我试过 Disable authentication for HTTP OPTIONS method (preflight request) 说。

Disable authentication for HTTP OPTIONS method (preflight request)e 

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

systemctl restart httpd，失败。

最佳答案

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

Failed to load http://111.111.111.111/remote.html: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://127.0.0.1/' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

这是为了防止 CSRF 攻击。

例如如果在这种情况下可以使用通配符:恶意-SiteA 可以访问目标-SiteB 上的特权资源未经授权通过浏览器启动的 ajax 请求，只是因为受害者在某些时候为 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")); 
       },

关于javascript - 使用 ajax 发出 http 请求以获得基本授权和 cors，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52126028/

33 4 0
文章推荐： java - 将返回值传递给匿名类
文章推荐： java - TCP线程服务器/客户端
文章推荐： sockets - Clojure TCP 客户端的测试工具
文章推荐： java - 在 OS X 10.9 Mavericks 上安装 Java 源代码
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com