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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

849閲覧

【laravel×nuxt】axiosでapi.phpは呼び出せるけどweb.phpでエラーとなる

godcat

総合スコア10

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/08/24 11:19

前提

laravelとNuxtを利用したwebページを作成しています。
IP直接のアクセスは問題無かったのですが、ec2でドメインを設定してから419エラーと睨み続けています。

実現したいこと

ログインAPIの呼び出し、ログインの成功
本項はトップページでemail、passwordを入力しsubmitを実行した後の内容となります。

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

POST http://1.234.567.89:8080/login 419 (unknown status) Error: Request failed with status code 419 message: "CSRF token mismatch."

該当のソースコード

js

1// index.vue methodsの一部分です 2 3await this.$store.dispatch('auth/login', { 4 email: this.email, 5 password: this.password, 6 7 }).then(response => { 8 //色々な処理 9 })

js

1// auth.js 2 export const actions = { 3 async login({ commit }, { email, password }) { 4 5 await this.$axios.get('/sanctum/csrf-cookie').then(async (res) => { 6 try { 7 const response = await this.$axios.$post('/login', { email, password }) 8 //↑ここで落ちます 9 10 } catch (error) { 11    // 色々な処理 12 return 13 } 14 }).catch((err) => { 15 16 })

試したこと

・取得したドメインにhttpでアクセスしています。画面(Nuxt)の表示はされています。
・ドメインではなくIP直でアクセスしたらCSRF token mismatchが発生しませんでした。
・nuxt.config.jsではbaseURL: 'http://1.234.567.89:8080'のように設定しています
・laravel/config/session.phpのdomainは 'domain' => '1.234.567.89' としています。
・これら「1.234.567.89」をドメイン名に変更したりしましたが、上手くいきませんでした。
・auth.jsにてemail, passwordは中身が確認できています。誤入力されていない事も確認済です。

ドメインではいけずにIPではいける状態・・・?となり、
根本的に呼び出せていない、DBの問題なども考えましたが、手前で実行している

js

1// index.js 2 const response = this.$axios('/api/getUser').catch(err => { 3 console.log(err) 4 return 5 })

これはドメインからのアクセスでも正常に動作している事を確認しています。
そのため、laravel/routes/のapi.phpは呼び出せているのにweb.phpは呼び出せていないのか?という推測に致しました。的外れでしたら申し訳ございません。

何かご助言頂けますと幸甚に存じます。何卒宜しくお願い致します。

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

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

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

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

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

guest

回答2

0

CORSで許可されてるのはここで設定されてる分だけ。
https://github.com/laravel/laravel/blob/e5e46b4293104e95afdceb973c1e660541259177/config/cors.php#L18
'paths' => [ 'api/*' , 'sanctum/csrf-cookie' ],
api以下とSanctum用の例外一つだけ。web.phpに書いた分は全部動かない。
cors.phpを変更してもいいけどroutes/api.phpを使うのが普通の方法。

Breezeのapi用はcors.phpを変更して全部許可。Laravel側を完全にAPIとして使うならこれでもいい。
https://github.com/laravel/breeze/tree/1.x/stubs/api

投稿2022/08/24 14:20

kawax

総合スコア10377

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

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

0

色々不明なのでコメントしづらいですが、さしあたり以下は気になります。

POST http://1.234.567.89:8080/login

ドメイン名で呼び出したいのであれば、すべてドメイン名に統一する必要があります。IPアドレスが混ざってはだめです。
また、APIのポートはEC2でも8080なのでしょうか? ウェブページのポートは80ですか?
EC2ということは本番環境を想定しているのでしょうから、8080ポートというのは違和感があります。このあたりの整理から始めたらどうですか? 教えていただく際は、コメントではなく、質問本文への追記という形でお願いします。

投稿2022/08/24 12:21

ockeghem

総合スコア11701

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問