如何用JavaScript带凭证向HPCC集群的Roxie查询发送JSON请求？

我在访问需要登录凭证的HPCC集群时，创建JSON请求获取Roxie查询响应会被重定向到登录页面。尝试了以下代码，但常规模式运行会出现跳转问题，关闭CORS模式则报登录失败错误。

document.getElementById('loginForm').addEventListener('submit', function(event) {
  event.preventDefault();

  var username = 'username';
  var password = 'password';

  login(username, password)
    .then(() => {
      document.getElementById('output').innerHTML = '<p>Login successful.</p>';
      window.location.href = 'http://cluster_abc:8002/esp/files/Login.html';
    })
    .catch(error => {
      console.error('Error:', error);
      document.getElementById('output').innerHTML = '<p>Login failed. Please try again.</p>';
    });
});

function login(username, password) {
  return new Promise((resolve, reject) => {
    var loginUrl = 'http://university-roxie.us-hpccsystems-dev.azure.lnrsg.io:8002/esp/login';
    var formData = new FormData();
    formData.append('username', username);
    formData.append('password', password);

    fetch(loginUrl, {
      method: 'POST',
      body: formData
    })
      .then(response => {
        if (!response.ok) {
          throw new Error('Login failed');
        }
        resolve();
      })
      .catch(error => {
        reject(error);
      });
  });
}

问题分析与解决办法 #

• 凭证传递缺失：HPCC的ESP接口依赖会话Cookie维持登录状态，当前代码未配置credentials选项，导致登录后的Cookie无法被保存和后续请求复用。修改fetch请求，添加credentials: 'include'（跨域场景必须用该值，同域可用'same-origin'）：

  fetch(loginUrl, {
    method: 'POST',
    body: formData,
    credentials: 'include' // 关键：携带并保存会话凭证
  })
  

• 重定向处理优化：登录成功后无需跳转回登录页，应直接发起Roxie查询。同时，HPCC登录接口可能返回302重定向，可通过redirect: 'manual'手动处理响应，避免自动跳转干扰：

  fetch(loginUrl, {
    method: 'POST',
    body: formData,
    credentials: 'include',
    redirect: 'manual'
  })
  .then(response => {
    // 通过响应状态或Set-Cookie头判断登录是否成功
    if (response.status === 302 || response.headers.get('set-cookie')) {
      resolve();
    } else {
      throw new Error('Login failed');
    }
  })
  

• 后续Roxie查询需携带凭证：登录成功后发起Roxie查询时，同样要配置credentials: 'include'，确保会话有效：

  function getRoxieResponse(queryParams) {
    return fetch('http://university-roxie.us-hpccsystems-dev.azure.lnrsg.io:8002/roxie/your-query-endpoint', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(queryParams),
      credentials: 'include'
    })
    .then(res => res.json());
  }
  

• 服务器端CORS配置：若跨域请求仍失败，需确认HPCC集群的ESP服务已配置正确的CORS头：

  • 允许前端域名：Access-Control-Allow-Origin: 你的前端域名
  • 允许携带凭证：Access-Control-Allow-Credentials: true
  • 允许必要的请求方法和请求头

内容的提问来源于stack exchange，提问作者decoded051