【问题标题】:Browser auth popup not showing up in case of ajax cors with basic authentication request在带有基本身份验证请求的 ajax cors 的情况下,浏览器身份验证弹出窗口不显示
【发布时间】:2019-05-31 02:07:59
【问题描述】:

从域 A 的网页中,我向域 B 发出 ajax 请求,以获取在域 B 上配置了基本身份验证的 JSON。我可以访问两个域上的代码。

我在域 B 上配置了所有必需的 CORS 标头(在阅读了一些 stackoverflow 之后,甚至将 Access-Control-Allow-Origin 标头值设为特定而不是“*”)

我期待的是浏览器弹出基本身份验证,但 POST 请求只是失败并显示 401。

我可以看到服务器已响应 PRE-FLIGHT OPTION 请求的预期响应标头,位于 OPTION 和实际 POST 方法的请求和响应标头下方发生的调用

***OPTION REQUEST***
Host: DOMAIN_B:8085
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with
Referer: http://DOMAIN_A:2280/app/
Origin: http://DOMAIN_A:2280
Connection: keep-alive
***OPTION RESPONSE***
HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: http://DOMAIN_A:2280
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Headers: Content-Type,Authorization,x-requested-with
Access-Control-Max-Age: 1
Allow: GET,POST
Content-Type: text/html; charset=utf-8
Content-Length: 8
Date: Fri, 04 Jan 2019 12:48:48 GMT
Connection: keep-alive
*** ACTUAL POST REQUEST***
Host: DOMAIN_B:8085
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://DOMAIN_A:2280/app/
X-Requested-With: XMLHttpRequest
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Content-Length: 105
Origin: http://DOMAIN_A:2280
Connection: keep-alive
*** ACTUAL POST REQUEST***
HTTP/1.1 401 Unauthorized
X-Powered-By: Express
Vary: X-HTTP-Method-Override, Origin
Access-Control-Allow-Origin: http://DOMAIN_A:2280
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: POST,GET,PUT,DELETE
Access-Control-Allow-Headers: Content-Type,Authorization,x-requested-with
Access-Control-Max-Age: 1
WWW-Authenticate: Basic realm=artist
Content-Type: text/plain; charset=utf-8
Content-Length: 12
Date: Fri, 04 Jan 2019 12:48:48 GMT
Connection: keep-alive

因此,它期望浏览器查看 POST 调用的响应(401 HTTP 代码和 WWW-Authenticate 标头)应该提示显示本机身份验证弹出窗口,但它没有这样做。我不确定我在这里做错了什么。显示自定义表单以捕获凭据并使用 btoa 函数在 "Authorization" 标头中传递它们不是一个选项

感谢任何帮助,我在这里扯断我的头发!!!

【问题讨论】:

    标签: ajax cors basic-authentication


    【解决方案1】:

    使用basic-authnpm 插件

    const auth = require('basic-auth');
    app.use(function (request, response, next) {
      var user = auth(request);
      console.log("user => ",user);
      if (!user || !user.name || !user.pass) {
        response.set('WWW-Authenticate', 'Basic realm="example"');
        return response.status(401).send();
      }
      return next();
    });
    

    【讨论】:

    • 对于 API 调用,基本身份验证工作,如果我们传递授权标头。但我的问题是浏览器没有显示基本身份验证弹出窗口。
    • 我已经更新了我的答案,请检查一下。我希望它适用于(API 和 WEB)
    • 我设法解决了这个问题,所以如果你想做 CORS/authenticated request,有几件事需要考虑 1) CORS 服务器需要专门允许来源,而不仅仅是做通过“*”(通过在预检 OPTIONS 请求中设置适当的标头)2)授权标头需要在允许的标头列表中 3)必须使用 xhr.withCredentials = true 触发 AJAX 请求。我的问题是我使用 ExtJS 来启动 AJAX 并在 ExtJs ajax 对象中将 withCredential 标志设置为 true 不会将 XHR.withCredentials 设置为 true,这似乎是错误
    猜你喜欢
    • 2018-09-14
    • 1970-01-01
    • 1970-01-01
    • 2020-11-25
    • 1970-01-01
    • 1970-01-01
    • 2019-04-06
    • 1970-01-01
    相关资源
    最近更新 更多