包含憑據后仍收到 401 未授權：HTTP 請求中的“包含”

Question

我是 Ember.js 的新手，目前正在開發車輛應用程序。 我已經完成了登錄部分，其中我有一個 HTTP Post 請求，該請求具有credentials: 'include'並將其發送到遠程服務器。 成功登錄后，用戶將轉到主頁，其中有三個選項按鈕：車輛、注銷和個人資料數據。 此外，cookies 被設置為登錄響應具有 set-cookie header。 目前我沒有使用車輛按鈕，但其他兩個沒有按預期工作。 對於他們，我已經提出了另外兩個 http 獲取請求，其中我有credentials: 'include' ，但我假設我無法訪問其中的 cookies 我的jsessionId 。 我嘗試使用document.cookie讀取它們，但結果發現jsessionId僅為 HTTP ，這意味着它無法通過 JavaScript 訪問。

如果我閱讀 cookies，我可以將它們包含在我的兩個注銷和 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>

模板/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

顯示錯誤信息

所以我設法找出是什么阻止了 cookies 被正確設置。 事實證明，當遠程服務器向我發送 cookies 時，我的瀏覽器阻止了它們，因為它們沒有 SameSite 屬性，因此瀏覽器將其標記為 SameSite=Lax 並阻止了它們。

為了防止這種情況，我不得不訪問這個 url: chrome://flags/#same-site-by-default-cookies 然后默認禁用 SameSite cookies：

這是一個例子：

SameSite 默認 cookies：禁用