LaravelのURLからpublicを消したらReactからのapiリクエストがうまく動かなくなった

Laravel×React(Laravelの中にReactがあるパターン)でアプリを作成しサーバーにアップした際に、ドキュメントルートのpublicを消すために.htaccessを設置しました。
しかしなぜかReactからのapiリクエストがうまく動かなくなってしまったので備忘録を残しておきます。

環境

  • Laravel 9x
  • React 17x
  • Vite

方法

ルート直下に.htaccessを設置する

ドキュメントルートのpublicを消すためにドキュメントルートの直下に以下の.htaccessを設置します。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^(.*)$ public/$1 [QSA,L]
</IfModule>

apiが取れない

上記の方法でpublicを除いた形でも画面が表示されるようになりました。

apiに関してはAxiosインスタンスをaxios.create()メソッドで作成し、URLは環境変数から呼び出すように設定していました。

Laravel×Viteでは環境変数はVITE_ というプレフィックスを付与したうえで、import.meta.envオブジェクトを介して呼び出すことができます。

https://readouble.com/laravel/9.x/ja/vite.html
https://ja.vitejs.dev/guide/env-and-mode.html

VITE_APIURL=https://example.com
import axios from "axios";

export const axiosApi = axios.create({
    baseURL: import.meta.env.VITE_APIURL,
    headers: { 'X-Requested-With': 'XMLHttpRequest' },
    withCredentials: true,
});

しかし、上記の設定では、apiリクエストがすべてstatsu:200でhtmlが返却されるようになってしまいうまく動きません。

解決策

.htaccessでpublicを消す設定をしたのでapiリクエストもpublicを除いた形で取得できると思い込んでいたのですが、apiリクエストに関してはpublicを記入した形で設定しなければなりませんでした。

VITE_APIURL=https://example.com/public

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。