Laravel クロスドメインにログインするための Vue リクエストの失敗の解決策

前書き: 実際の開発では、特にフロントエンドとバックエンドの分離プロジェクトにおいて、クロスドメインリクエストは非常に一般的な問題です。 Vue をフロントエンド フレームワークとして使用し、Laravel をバックエンド フレームワークとして使用する場合、ログイン時にクロスドメインの問題が発生する可能性があります。この記事では、Vue による Laravel へのログイン要求のクロスドメイン失敗の問題を解決する方法を紹介します。

1.クロスドメインとは何ですか?

簡単に言えば、クロスドメインとは、2 つの異なるドメイン名間のデータ要求を指します。たとえば、ローカル開発環境では、フロントエンド リクエスト アドレスは http://localhost:8080 で、バックエンド アドレスは http://localhost:8000 です。これら 2 つのアドレスが異なる場合、クロスドメインの問題が発生します。が発生する可能性があります。

2. ドメイン間で失敗するのはなぜですか?

クロスドメイン障害は通常、ブラウザのクロスドメイン ポリシーによって発生します。デフォルトでは、ブラウザーはユーザーのプライバシーとセキュリティを保護するために、異なるドメイン名間のデータ要求をブロックします。解決策は、クロスドメイン要求を許可するようにバックエンドを構成することです。

3. Laravel のバックエンド設定によりクロスドメイン リクエストが可能になります

Laravel では、ミドルウェアを通じてクロスドメイン リクエストを実装できます。具体的な手順は次のとおりです:

1. /Http/Middleware/ でアプリの Cors.php ファイルを見つけ、ハンドル メソッドに次のコードを追加します:

header('Access-Control-Allow-Origin: *'); //アクセスを許可するように設定しますすべてのソースから
header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization');//アクセスを許可するヘッダー情報を設定します
header('Access-Control-Allow-Methods: GET,POST,PUT, DELETE');//アクセスを許可する方法を設定します
return $response;

2. Cors ミドルウェアをルートに適用し、app/Http/Kernel.php を見つけますファイルを開き、次のコードを追加します:

protected $middlewareGroups = [
'web' => [

  // ...

],
'api' => [

 'throttle:60,1',
 \Illuminate\Routing\Middleware\SubstituteBindings::class,
 \App\Http\Middleware\Cors::class //添加此处

],
];

この時点で、バックエンドはクロスドメインリクエストを許可しています。

4. Vue フロントエンドでクロスドメイン リクエストを設定する

次のステップは、Vue でクロスドメイン リクエストを設定することです。 Vue-axios プラグインを使用して、非同期リクエストを送信し、応答を処理できます。 Vue プロジェクトで次のコマンドを実行して Vue-axios をインストールします:

npm install --save axios vue-axios

次に、次の Vue-axios 構成を main.js に追加します。

##「axios」から axios をインポート

「vue-axios」から VueAxios をインポート
Vue.use(VueAxios, axios)
axios.defaults.withCredentials = true

5 . vue プロジェクトでの非同期リクエストの送信

上記の設定により、クロスドメインリクエストが許可されました。 Vue プロジェクトでは、非同期リクエストは次の方法で送信できます:

this.$axios.post('/login', {

'username': username, // フォームで渡されるパラメータ
'パスワード': パスワード // フォームで渡されるパラメーター
}).then(response => {

   // 请求成功回调

}).catch(error => {

   // 请求失败回调

})

概要: クロスドメイン リクエストを設定するには、バックエンドでクロスドメイン リクエストを許可するリクエスト ヘッダーを設定し、フロントエンドで Vue-axios を設定する必要があります。この 2 つの方法を採用することでのみ、フロントエンドとバックエンドを分離したプロジェクトをスムーズに進めることができます。

以上がLaravel クロスドメインにログインするための Vue リクエストの失敗の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。