从 AJAX 获取受 SSO 保护的 XHR 资源答案

【问题标题】：Get XHR resource protected by SSO from AJAX从 AJAX 获取受 SSO 保护的 XHR 资源
【发布时间】：2021-07-31 19:29:05
【问题描述】：

基本上，我有一个受 SSO 保护的在线 API (XHR)（基于 Vouch 的 OAuth 2.0）。通过 GET 请求访问 API 后，您会收到错误 302 并将您重定向到登录，然后如果成功通过身份验证，您将返回您的 API 并安全地访问资源。

我需要通过 AJAX 从“https://www.someUrl.com”源访问 XHR 资源 (XML) - 请参见下面的示例：

    $.ajax({
    url: "https://api.someUrl.com/xmlapi",
    dataType: 'xml',
    type: 'GET',
    
    success: function(xmlDoc){
    
    },
    error: function(xmlDoc) {
    console.log('Error: ' + xmlDoc.responseText);
    }
    });

如果 cookie 已经存在，则不会显示错误并且一切运行顺利。如果 cookie 不存在，那么我会收到 CORS 跨域错误。

如果用户未通过身份验证，“https://api.someUrl.com/xmlapi”通常会返回 302（临时重定向）。但是在 AJAX 中没有发生重定向。

开发者工具显示以下常见错误：

Access to XMLHttpRequest at 'https://api.someUrl.com/xmlapi' from origin 'https://www.someUrl.com' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested 
resource.

我尝试更新服务器端的“Access-Control-Allow-Origin”，但没有响应。这似乎与浏览器不接受在 ajax 中重新定向有关，尽管浏览器正在考虑 CORS 问题。

在 Network 下的开发者工具中签入，这就是我所拥有的：

常规

 Request URL: https://api.someUrl.com/xmlapi
    Referrer Policy: strict-origin-when-cross-origin

响应标头

content-length: 145
content-type: text/html
date: Mon, 10 May 2021 10:51:09 GMT
location: https://login.someUrl.com/login?

url=https://api.someUrl.com/apixml&vouch-failcount=&X- 
    Vouch-Token=&error=
server: nginx/1.18.0

请求标头

 :authority: api.someUrl.com
    :method: GET
    :path: /apixml
    :scheme: https
    accept: application/xml, text/xml, */*; q=0.01
    accept-encoding: gzip, deflate, br
    accept-language: en-US,en;q=0.9
    origin: https://www.someUrl.com
    referer: https://www.someUrl.com/
    sec-fetch-dest: empty
    sec-fetch-mode: cors
    sec-fetch-site: same-site

我的设置是这样的：

从www.XXX访问子域api.XXX上的资源
api.XXX 重定向到子域 login.XXX
如果登录成功，重定向回api.XXX

上面的工作，但是当我将它移植到 ajax 时它没有。

目的是让 www.XXX 用户在 ajax 代码需要访问以保护 api.XXX 等资源时进行身份验证。

非常感谢任何建议。

【问题讨论】：

这个问题和这个有关吗？ developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/…
看来我必须找到一种方法来捕获 nginx 范围内的 OPTION 请求（飞行前）。这需要在授权之前完成。我必须找到一种方法来做到这一点。找到后会发布解决方案。

标签： ajax cors single-sign-on

【解决方案1】：

我遇到此问题的原因是 302（重定向）响应中完全缺少“Access-Control-Allow-Origin”标头。 “curl -v https://api.com.au”帮助我快速查看标题。有“位置”标题但没有“访问控制允许来源”。因此，浏览器立即给出 CORS 错误并忽略重定向。解决方案是在 NGINX 的 302 响应标头中添加“Access-Control-Allow-Origin”。

这是 NGINX 中帮助解决问题的配置。

 location @error401 {
            # I added 3 lines below to solve CORS issue for 302 re-direct.
            add_header Access-Control-Allow-Origin "https://www.XXX.com.au" always;
            add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            # redirect to Vouch Proxy for login
            return 302 https://login.XXX.com.au/login?url=$scheme://$http_host$request_uri&vouch-failcount=$auth_resp_failcount&X-Vouch-Token=$auth_resp_jwt&error=$auth_resp_err;
            # you usually *want* to redirect to Vouch running behind the same Nginx config proteced by https
            # but to get started you can just forward the end user to the port that vouch is running on
        }

【讨论】：