在 js 中发送 cookie 获取 POST 或 GET 请求跨服务器 cors 启用服务器答案

【问题标题】：Sending cookies in js fetch POST or GET request cross server cors enabled server在 js 中发送 cookie 获取 POST 或 GET 请求跨服务器 cors 启用服务器
【发布时间】：2020-03-06 11:49:43
【问题描述】：

下面的代码参考和请求参考有 cmets 这些是在 SO 中添加的，以解释我对原始请求和代码不包含 cmets 的理解。

我知道使用 auth 标头获取请求的标准。我需要做的是获取服务器 A 设置给服务器 B 的 cookie，而无需通过 javascript 传递它。

我有服务器 A：http://127.0.0.1:8080 包含 index.html

查看 cookie jar 时的 index.html 包含一个 cookie

我还有服务器 B：http://0.0.0.0:8081。

http://127.0.0.1:8080/index.html 发出以下请求

let url = "http://0.0.0.0:8081/write" //this url is o a different server so certain headers are needed

  let cookies = document.cookie
  console.log(cookies) //this logs the cookie so I know its defo there
  let otherPram= {
    credentials: 'include',   //this is what I need to tell the browser to include cookies
    method: "GET"

  };

  fetch(url, otherPram)

在发出请求后，浏览器向http://0.0.0.0:8081/write 发出选项调用，响应为：

access-control-allow-credentials: true
access-control-allow-headers: accept, authorization, content-type, origin, x-requested-with, access-control-allow-credentials, cookie, access-control-allow-origin
access-control-allow-methods: GET, POST, OPTIONS
access-control-allow-origin: http://127.0.0.1. //also tried this with http://127.0.0.1:8080
access-control-expose-headers: Cache-Control, Content-Language, Content-Type, cookie
access-control-max-age: 600
connection: keep-alive
content-length: 0
date: Thu, 16 Jan 2020 08:22:19 GMT

但是请求不包含 cookie。

据我所知，它应该随 fetch 请求一起发送 cookie。

【问题讨论】：

标签： javascript cookies cross-domain fetch-api

【解决方案1】：

Cookie 属于一个来源。

  let cookies = document.cookie
  console.log(cookies) //this logs the cookie so I know its defo there

这表明 HTML 文档的来源有 cookie。

发出请求后，浏览器向http://0.0.0.0:8081/write 发出选项调用

所以你提出了一个跨域请求。

cookie 不属于该来源，因此浏览器不会发送它们。

如果您想向http://0.0.0.0:8081/ 发送cookie，那么您需要向http://0.0.0.0:8081/ 发出请求，并让它在响应中使用Set-Cookie 标头来首先设置它们。浏览器不会将 cookie 从 :8080 设置为 :8081，因为它们不是 :8081 的 cookie。

通常网络服务将使用an Authorization header而不是 cookie。

  let otherPram= {
    headers: {
      "Authorization": "Bearer SomeToken"
    },
    credentials: 'include',   //this is what I need to tell the browser to include cookies
    method: "GET"
  };

除此之外：我删除了"content-type": "application/json"。您正在发出 GET 请求，因此该请求没有指定类型的内容。

【讨论】：

整个 auth 事情，但我不想在 auth 标头中发送它我希望它被动地与 fetch 请求一起使用所有 POST、GET 和 href 页面更改都可以在不暴露的情况下得到保护JS中的关键。我想设置 httponly 和 secure 来实现我所追求的。这不是 credentials: 'include' 的作用吗？
@abe — credentials: 'include' 表示（除其他外）cookie 将被包括在内……但只有将发送到 URL 的 cookie，而不是来自 HTML 文档的 URL 的 cookie。如果您不想使用 Authorization 标头，请按照我在答案的第二秒中所说的操作并向 :8081 发出请求，这会导致设置 cookie。
对不起，我不明白你说我需要将选项的响应更改为“Set-Cookie: true”
没有。您需要向:8081 上的 URL 发出一个完全独立的 request（可能使用 POST）（可能使用 POST），服务器将使用 Set-Cookie 标头响应该 URL，该标头设置与您相同的 cookie正在使用:8080（响应正文可能类似于“您现在使用 cookie 在 :8081 上登录”）。
问题是8081没有cookie，我的目标是让cookie到8081。你是说我需要得到8080来设置cookie然后向8081发出请求，将cookie设置为垃圾然后在成功获取 8080 再次用正确的 cookie 填充它，然后可以发送到 8081？

【解决方案2】：

至少在服务器上试验子域，您可以共享 cookie，在这种情况下就足够了。

连同所有的 cors 属性和 fetch 包括在内。正在设置的 cookie 也需要设置域。

Set-Cookie: myCookie=value; domain=root.com

root.com 的所有子域都将共享该特定 cookie。

【讨论】：