在包含凭据后仍然收到 401 未经授权：'include' 在 HTTP 请求中

Question

我是 Ember.js 的新手，目前正在开发一款汽车应用程序。我已经完成了登录部分，其中我有一个 HTTP Post 请求，其中在 init object 中有 credentials : 'include' 并将其发送到远程服务器。成功登录后，用户将转到主页，其中有三个选项按钮：车辆、注销和配置文件数据。此外，cookie 被设置为登录响应具有 set-cookie header。目前我没有使用车辆按钮，但其他两个没有按预期工作。对于他们，我提出了另外两个 http 获取请求，其中我在 init object 中有 credentials : 'include'，但我假设我无法访问其中有我的 jsessionId 的 cookie。我尝试用 document.cookie 读取它们，但结果发现 jsessionId 只是 HTTP，这意味着它不能通过 JavaScript.

访问

如果我读取 cookie，我可以将它们包含在我的两个提取请求中，用于注销和 getUser 我认为请求会成功。

我说的对不对，我该怎么办？

这是我的一些源文件：

components/login.js

import Component from '@ember/component';
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
import {inject as service} from "@ember/service";

export default class LoginComponent extends Component{
  @tracked email;
  @tracked password;
  @service router;

  @action
  logUser(e){
    e.preventDefault();
    let userData = {
        'email' : this.email,
        'password' : this.password
    };
    let fetchObject = {
        method: 'POST',
        credentials: 'include',
        headers : {
            'Content-type' : 'application/json',
        },
        body : JSON.stringify(userData),
    };
    fetch('https://gara6.bg/auto-api/users/login', fetchObject)
        .then(response =>{
            return response.json();
        })
        .then(data =>{
            if(data.statusCode == 'SUCCESS'){
                this.redirectHome(data);
            }
            else{
                throw Error('Check your data or connection');
            }
        })
        .catch(error =>{
            alert('Unable to log in ! ' + error);
        });
  }

  redirectHome(data){
      this.router.transitionTo('home');
  }

}

components/login.hbs

<form {{on 'submit' this.logUser}} id='login'>
    <label id="label" class="formElement" for="exampleInputEmail1">Email address</label>
    <Input class="form-control formElement input" id="exampleInputEmail1" placeholder="Enter email" @value={{this.email}}/><br>
     <label id="label" for="exampleInputPassword1">Password</label>
    <Input class="form-control formElement input" id="exampleInputPassword1" placeholder="Password" @value={{this.password}}/><br>
    <button id='loginLink' class='btn btn-primary btn-lg formElement ' type='submit'>Log In</button> 
</form>

templates/home.hbs:

<h1>Welcome User!</h1>
<OptionButtons/>

components/option-buttons.hbs:

<div class="buttonHolder">
    <button  class='btn btn-primary btn-lg homeButton' type='button' {{on 'click' this.logOut}}>Log Out</button><br>
    <button  class='btn btn-primary btn-lg homeButton' type='button'>Vehicles</button><br>
    <button  class='btn btn-primary btn-lg homeButton' type='button' {{on 'click' this.userMe}}>Profile Data</button><br> 
</div>

components/option-buttons.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from "@ember/object";

export default class OptionButtonsComponent extends Component {

    @service router;

    @action
    userMe(){
      let fetchObject = {
          method: 'GET',
          credentials : 'include',
          headers : {
              'Content-type' : 'application/json',
          },
      };
      fetch('https://gara6.bg/auto-api/users/me', fetchObject)
          .then(response => {
              return response.json();
          })
          .then(data => {
              if(data.statusCode == 'SUCCESS'){
                 console.log(data.data);
              }
              else{
                  throw ('Check your internet connection');
              }
          })
          .catch(error =>{
              alert('Unable to Log out ! '+ error);
          });
    }

    @action
    logOut(){
        let fetchObject = {
            method: 'POST',
            credentials : 'include',
            headers : {
                'Content-type' : 'application/json',
            },
        };
        fetch('https://gara6.bg/auto-api/users/logout', fetchObject)
            .then(response => {
                return response.json();
            })
            .then(data => {
                if(data.statusCode == 'SUCCESS'){
                    this.backToLogin();
                }
                else{
                    throw ('Check your internet connection');
                }
            })
            .catch(error =>{
                alert('Unable to Log out ! '+ error);
            });
    }

    backToLogin() {
        this.router.transitionTo('login');
    }
}

Answer 1

Error message displayed

所以我设法找出阻止正确设置 cookie 的原因。结果是，当远程服务器向我发送 cookie 时，我的浏览器阻止了它们，因为它们没有 SameSite 属性，因此浏览器将其标记为 SameSite=Lax 并阻止了它们。

为了防止这个原因，我不得不访问这个 url： chrome://flags/#same-site-by-default-cookies 然后默认禁用 SameSite cookies:

这是一个例子：

SameSite by default cookies: disabled

在包含凭据后仍然收到 401 未经授权：'include' 在 HTTP 请求中

Still receiving 401 unauthorized after including credentials : 'include' in HTTP requests

javascript

http

cookies

ember.js