質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

解決済

1回答

364閲覧

vercelにデプロイしたnextjsとherokuにデプロイしたlaravelの通信のエラーの解消をしたい

ryuichi-works

総合スコア36

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2024/03/26 22:36

実現したいこと

nextjsで作成したものをvercelにデプロイし、バックエンドのlaravel apiと通信させる

前提

フロントエンドをnextjs、バックエンドをlaravelでアプリを作成しています。
前提として開発環境のdocker環境では通信はうまくいっていました。
しかしvercelにデプロイしたnextjsアプリからログインや会員登録処理などpostリクエストをしようとしたところ、419エラーとなりcorsエラーになってしまいました。
バックエンドはherokuにデプロイしています。

わかっている原因として開発環境ではリクエストヘッダーにX-Xsrf-Tokenヘッダーが適切に付与されcsrfトークンがやりとりされており通信ができていますが、vercelにデプロイした状態でバックエンドとやりとりすると、このX-Xsrf-Tokenヘッダーが付与できていない様です。

開発環境の通信の状態
イメージ説明

vercelデプロイ時
イメージ説明

発生している問題・エラーメッセージ

message: "CSRF token mismatch."

該当のソースコード

フロントエンド
src/lib/axios.ts

typescript

1import Axios from "axios"; 2 3const axios = Axios.create({ 4 baseURL: 'http://localhost', 5 // baseURL: process.env.NEXT_PUBLIC_BACKEND_URL, 6 xsrfHeaderName: 'X-XSRF-TOKEN', 7 xsrfCookieName: 'XSRF-TOKEN', 8 withCredentials: true, 9 headers: { 10 // 'X-Requested-With': 'XMLHttpRequest', 11 'content-type': 'application/json', 12 } 13}) 14 15export default axios;

src/pages/users/login.tsx

import { useContext, useState } from "react"; import { useRouter } from "next/router"; import { AuthContext } from "@/context/AuthContext"; import type { User } from "@/context/AuthContext"; const UserLogin: NextPage = () => { const router = useRouter(); const [email, setEmail] = useState<string>('') const [password, setPassword] = useState<string>('') type Errors = { email: string[], password: string[] } const [errors, setErrors] = useState<Errors>({ email: [], password: [] }); const { setIsAuth, setUser } = useContext(AuthContext); const csrf = async () => await axios.get('/sanctum/csrf-cookie'); const login = async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); const loginData = { email: email, password: password } await csrf(); await axios.post('/users/login', loginData, { headers: { 'X-Xsrf-Token': Cookies.get('XSRF-TOKEN'), } }).then(async (res) => { await axios.get('/api/user').then(res => { const user: User = res.data; setUser(user); setIsAuth(true); router.push(`/users/${user.id}/profile`); }) }).catch((e) => { const newErrors = { email: [], password: [], ...e.response.data.errors }; setErrors(newErrors); console.log('ログインに失敗しました。'); }) } 〜〜〜 〜〜〜

途中の『'X-Xsrf-Token': Cookies.get('XSRF-TOKEN'),』の部分でX-Xsrf-Tokenを明示的に付与していますが、これは開発環境を作る際に今回と似たX-Xsrf-Tokenヘッダーが付与されない事象が起こったためこれに対する対処で明示的に記載しています。

next.config.js

/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, } module.exports = nextConfig

試したこと

バックエンドのherokuの環境変数に
SESSION_SECURE_COOKIE: true
を設定しcookieのSecureをtrue、sameSiteをnoneにしています。この設定はローカルでもしていました。

chatgptや記事を調べてvercelのリクエストヘッダーの扱いが通常と異なるのかなと検討をつけましたが、なぜX-Xsrf-Tokenヘッダーが付与されないのかがわかりません。

わかる方いましたらよろしくお願いします。

補足情報(FW/ツールのバージョンなど)

mac book pro 13inch(2020 intel)
macOS Monterey
vscode 1.87.2
Dev Containers v0.348.0
docker desktop 4.18.0
Docker 20.10.24
php 8.2
laravel 9系
composer 2.5
next.js 14.0.3
react 18.2.0
node:20.9.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

vercelやherokuはPublic Suffix Listに含まれてるので外部からクッキー・セッションを設定できない。
https://vercel.com/guides/can-i-set-a-cookie-from-my-vercel-project-subdomain-to-vercel-app

ブラウザのセキュリティ機能なのでローカルでは問題なくてもvercelやherokuで動かすと発生する。

両方にドメイン設定して
Next.js:example.comとLaravel:api.example.comのサブドメイン間なら正しく動くはず。

SanctumのSPA認証は「ファーストパーティ」のみなのでサブドメインでしか動かない。

vercelやherokuでのSanctumのSPA認証はドメイン設定しない限りどうやっても不可能。

投稿2024/03/27 01:14

pcs

総合スコア417

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryuichi-works

2024/03/28 09:01

pcsさん回答ありがとうございます。ご指摘いただいた通りドメインを独自ドメインとそのサブドメインで設定し、加えてcookieの属性であるdomain属性にその独自ドメインが格納される様にしたところ、リクエストヘッダーにX-XSRF-TOKENヘッダーが付与され通信がうまくいきました。ドメインに関する知識が曖昧だったのでpcsさんの回答で大変勉強になりました。ありがとうございました! デプロイしたサイトのurl: https://strii.net 参考にしたサイト:https://teratail.com/questions/369477
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問