如何使用 fetch 在浏览器环境中获取“Set-Cookie”标头

问题描述 投票:0回答:2

我正在使用 javascript 登录 linkendIn。登录后,我从响应的“Set-Cookie”标头中提取 jsession id。但是,当我尝试在扩展程序或浏览器环境中使用相同的代码时,我得到的是状态代码 0,因此没有得到 set-cookie 标头。那么如何使用 fetch 在浏览器环境中获取 Set-Cookie 标头。如果不可能使用 fetch 建议一些替代方案

这是我到目前为止尝试过的

(async () => {
  const loginPageResponse = await fetch('https://www.linkedin.com/login');
  const loginPageHtml = await loginPageResponse.text();
  const loginCsrfParamMatches = loginPageHtml.match(/name="loginCsrfParam" value="([^"]+)"/);
  const loginCsrfParam = loginCsrfParamMatches && loginCsrfParamMatches[1];

  const loginFormData = new URLSearchParams();
  loginFormData.append('session_key', '[email protected]');
  loginFormData.append('session_password', 'password');
  loginFormData.append('loginCsrfParam', loginCsrfParam);
  

  const loginResponse = await fetch('https://www.linkedin.com/uas/login-submit', {
    method: 'POST',
    body: loginFormData,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': '*/*',
      'Referer': 'https://www.linkedin.com/home',
      "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36",
    },
    redirect: 'manual'
  });
  const jsessionId = loginResponse.headers.get('Set-Cookie')
  const jId = jsessionId.match(/ajax:\d+/)[0];
  console.log(jId);

javascript google-chrome-extension fetch-api
2个回答
0
投票

在浏览器环境中,由于同源策略,您不能直接从响应对象访问Set-Cookie 头。但是,您可以使用

document.cookie
属性来访问响应设置的 cookie。

发送登录请求后,您可以使用document.cookie 检索JSESSIONID cookie 的值。这是一个示例,说明如何修改代码以检索 JSESSIONID cookie:

(async () => {
  const loginPageResponse = await fetch('https://www.linkedin.com/login');
  const loginPageHtml = await loginPageResponse.text();
  const loginCsrfParamMatches = loginPageHtml.match(/name="loginCsrfParam" value="([^"]+)"/);
  const loginCsrfParam = loginCsrfParamMatches && loginCsrfParamMatches[1];

  const loginFormData = new URLSearchParams();
  loginFormData.append('session_key', '[email protected]');
  loginFormData.append('session_password', 'password');
  loginFormData.append('loginCsrfParam', loginCsrfParam);
  

  const loginResponse = await fetch('https://www.linkedin.com/uas/login-submit', {
    method: 'POST',
    body: loginFormData,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': '*/*',
      'Referer': 'https://www.linkedin.com/home',
      "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36",
    },
    redirect: 'manual'
  });

  // retrieve the JSESSIONID cookie from document.cookie
  const cookies = document.cookie.split(';');
  const jsessionId = cookies.find(cookie => cookie.trim().startsWith('JSESSIONID='));
  const jId = jsessionId.match(/ajax:\d+/)[0];
  console.log(jId);
})();

注意 document.cookie 返回一个字符串,其中包含为当前域设置的所有 cookie,以分号分隔。您可以使用 split 方法将字符串拆分为单个 cookie 的数组,然后使用 find 方法检索 JSESSIONID cookie。获得 cookie 后,您可以像以前一样从中提取 ajax 值。

请记住,从 document.cookie 访问 cookie 受同源策略的约束,这意味着您只能访问为当前域设置的 cookie。如果登录请求是针对不同的域,您可能需要使用不同的方法来检索 cookie 值,例如将其存储在本地存储中或使用浏览器扩展 API。


0
投票

在浏览器环境下,默认不会包含Set-Cookie header。但是,您可以在获取请求中包含凭据选项以指定应包含 cookie。 更改代码如下:

const loginResponse = await fetch('https://www.linkedin.com/uas/login-submit', {
  method: 'POST',
  body: loginFormData,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Accept': '*/*',
    'Referer': 'https://www.linkedin.com/home',
    "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36",
  },
  redirect: 'manual',
  credentials: 'include' // include cookies in the request
});

const jsessionId = loginResponse.headers.get('Set-Cookie');
const jId = jsessionId.match(/ajax:\d+/)[0];
   

© www.soinside.com 2019 - 2024. All rights reserved.