Le navigateur n'a pas enregistré le cookie

l'éditeur php Youzi est là pour vous présenter un problème courant : le navigateur n'enregistre pas les cookies. Lorsque nous utilisons quotidiennement des navigateurs pour accéder à des pages Web, les cookies constituent un mécanisme courant qui peut aider les sites Web à mémoriser le statut de connexion de l'utilisateur, les paramètres personnalisés et d'autres informations. Cependant, nous rencontrons parfois des problèmes tels que le navigateur qui n'enregistre pas les cookies, ce qui entraîne la perte du statut de connexion et l'impossibilité de naviguer normalement sur le Web. Alors pourquoi cela arrive-t-il ? Explorons-le ensemble !

Contenu de la question

Essayé 15648070,15648070 malheureusement sans succès :)

Bonjour, c'est la première fois que j'utilise gin pour créer une API, et j'ai rencontré quelques problèmes lors de la configuration des cookies sur le navigateur

Je veux dire, sous l'onglet dev 工具 上查看请求时，我看到了 set-cookie 标头和正确的值，也在该请求中的 cookie, j'ai aussi vu des cookies

Le principal problème c'est qu'il n'est pas enregistré sur mon navigateur (dev工具 -> application -> storage -> cookieset mes cookies n'existent pas)

Backend :

router.use(cors.new(cors.config{
        allowmethods:     []string{"get", "post", "put", "patch", "delete", "head", "options"},
        allowheaders:     []string{"origin", "content-length", "content-type"},
        maxage:           12 * time.hour,
        allowallorigins:  true,
        allowcredentials: true,
    }))

    router.post("/users/login", server.loginuser)

func (server *server) loginuser(ctx *gin.context) {
        ...
    ctx.setcookie("access_token", accesstoken, 3600, "/", "localhost", false, true)
    ctx.setcookie("refresh_token", refreshtoken, 3600, "/", "localhost", false, true)

    ctx.json(http.statusok, gin.h{"ok": true, "payload": rsps})

}

Front-end :

const login = async () => {
    const res = await fetch("http://localhost:3000/users/login", {
      method: "POST",
      body: JSON.stringify({ username, password }),
    });
    const data = await res.json();
    console.log(data);
  };
  const handleFormSubmit = (e) => {
    e.preventDefault();
    login();
  };

  return (
    <div>
      <h1>Login Page</h1>
      <form onSubmit={handleFormSubmit}>
         ...
        <button type="submit">Login</button>
      </form>
    </div>
  );

Des indices..?

Solution

(Merci Discord 上的 #Reactiflux chaîne)

J'ai raté deux choses..

Côté serveur :

• AllowHeaders headers -> 添加 "Access-Control-Allow-Headers", "Authorization"

• Ajouter AllowOriginFunc -> 意味着不允许 * à la place d'un domaine spécifique

Front-end :

• Configurer withCredentials: true 添加到我的 axios

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!