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

Question

基本上我有一个受 SSO（基于 Vouch 的 OAuth 2.0）保护的在线 API (XHR)。通过 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 cross-origin 错误。

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

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

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' 但它没有响应。尽管浏览器抱怨 CORS 问题，但似乎与 ajax 中的 re-direcing 不被浏览器接受有关。

查看Network下的开发者工具，我有：

一般

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

响应Headers

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

请求Headers

 :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 访问 sub-domain 上的资源 api.XXX
api.XXX 重定向至 sub-domain login.XXX
如果登录成功，重定向回api.XXX

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

目的是让 www.XXX 用户在 ajax 代码需要访问以保护 api.XXX.

等资源时进行身份验证

非常感谢任何建议。

Answer 1

我遇到此问题的原因是 'Access-Control-Allow-Origin' header 在 302 (re-direct) 响应中完全缺失。 “curl -v https://api.com.au”帮助我快速查看了 header。有 'location' header 但没有 'Access-Control-Allow-Origin'。因此浏览器立即给出 CORS 错误并忽略 re-direct。解决方案是将 'Access-Control-Allow-Origin' 添加到 NGINX 中的 302 响应 header。

这是帮助解决问题的 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
        }

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

Get XHR resource protected by SSO from AJAX

ajax

single-sign-on

cors