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

実現したいこと

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

総合スコア342

ryuichi-works

2024/03/28 09:01

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

行動規範の内容に同意します