Question

我正在尝试使用fetch on react实现客户端登录。

我正在使用护照进行身份验证。我使用fetch而不是常规form.submit()的原因是因为我希望能够从我的快速服务器收到错误消息，例如："username or password is wrong"。

我知道护照可以使用flash消息发回消息，但flash需要会话，我想避免使用。

这是我的代码：

fetch('/login/local', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password,
      }),
    }).then(res => {
      console.log(res.headers.get('set-cookie')); // undefined
      console.log(document.cookie); // nope
      return res.json();
    }).then(json => {
      if (json.success) {
        this.setState({ error: '' });
        this.context.router.push(json.redirect);
      }
      else {
        this.setState({ error: json.error });
      }
    });

服务器发送cookie就好了，正如你在chrome的开发工具上看到的那样：

但Chrome不会在应用程序中设置cookie - ＆gt; Cookies - ＆gt; localhost：8080：“该网站没有cookie”。

知道如何让它发挥作用吗？

Answer 1

问题原来是未设置提取选项credentials: same-origin/include。由于fetch文档提到了在请求中发送cookie所需的此选项，因此在阅读cookie时没有提到这一点。

所以我只是改变了我的代码：

fetch('/login/local', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      credentials: 'same-origin',
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password,
      }),
    }).then(res => {
      return res.json();
    }).then(json => {
      if (json.success) {
        this.setState({ error: '' });
        this.context.router.push(json.redirect);
      }
      else {
        this.setState({ error: json.error });
      }
    });

Answer 2

来自https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

的与jQuery差异部分

fetch（）不会接收跨站点Cookie。您无法建立跨站点Cookie 使用fetch（）进行站点会话。来自其他站点的Set-Cookie标头是默默无视。
fetch（）不会发送Cookie ，除非您设置了凭据初始化选项。 自2017年8月25日起：规范更改了默认凭据策略为同源。 Firefox自从更改 61.0b13。）

Answer 3

我花了很长时间，但没有任何效果。

在尝试了几种在线解决方案后，这个对我有用。

希望它也对您有用。

{
  method: "POST",
  headers: {
    "content-type": "API-Key",
  },
  credentials: "include",
}

fetch：从获取响应中获取cookie

3 个答案: