前提・実現したいこと
サーバーサイドはGoのecho、フロントエンドはReactを使ったアプリを開発しています。
サーバー側でcookieを生成・送信しているはずなのですが、ブラウザ側でcookieが保持されません。
どのように対処すれば良いのでしょうか。
サーバー側でcookieを生成し送信すれば、ブラウザに保持されるものと考えていたのですが、React(javascript)でも何らかの処理が必要になるのでしょうか。
ブラウザのネットワークタブで表示されたレスポンスヘッダー
Access-Control-Allow-Origin: * Content-Length: 0 Date: Fri, 12 Nov 2021 15:57:51 GMT Set-Cookie: token=xxxxxxxx; Path=/; Expires=Fri, 12 Nov 2021 16:57:51 GMT; HttpOnly; SameSite=Lax Vary: Origin
該当のソースコード
go
1package main 2 3"net/http" 4"time" 5"github.com/labstack/echo/v4" 6"github.com/labstack/echo/v4/middleware" 7 8func main() { 9 e := echo.New() 10 e.Use(middleware.CORS()) 11 e.POST("/login", Login) 12} 13 14func Login(c echo.Context) error { 15 // 省略 16 17 myCookie := &http.Cookie{ 18 Name: "token", 19 Value: "xxxxxxxx", 20 Path: "/", 21 Expires: time.Unix(3600, 0), 22 Secure: false, 23 HttpOnly: true, 24 SameSite: http.SameSiteLaxMode, 25 } 26 c.SetCookie(myCookie) 27 28 return c.NoContent(http.StatusOK) 29}
js
1import axios from 'axios'; 2import { configure } from 'axios-hooks' 3 4const axiosInstance = axios.create({ 5 baseURL: 'http://localhost:8080' 6}); 7configure({cache:false, axios:axiosInstance }); 8 9axios.post('login', { 10 email: 'xxx@example.com', 11 password: 'xxxxxxxxxx' 12}).then((res) => { 13}) 14.catch((err) => { 15}); 16
補足情報(FW/ツールのバージョンなど)
go 1.16
echo 4.4.0
axios 0.24.0
axios-hooks 2.7.0
> ブラウザ側でcookieが保持されません。
これはどのように確認しましたか?
chromeの開発者ツールのApplicationタブ→Cookiesから確認しました。
「Set-Cookie: token=xxxxxxxx」の内容が表示されるかと思ったのですが、何も表示されていないようです。
確認方法は質問に追記しておいてください。
withCredentials の設定と、go のポートが別なら cors 対応も必要では。
https://ondwn.com/blog-20190516/
ありがとうございます。
確かに、withCredentialsをgolangとreact双方に設定する必要がありました。
回答1件
あなたの回答
tips
プレビュー