現(xiàn)代の Web 開(kāi)発では、フロントエンドとバックエンドの分離がますます一般的な開(kāi)発モデルになっています。フロントエンドは Vue フレームワークを使用し、バックエンドは ThinkPHP フレームワークを使用して構(gòu)築されているため、クロスドメインの問(wèn)題は避けられません。この記事では、ThinkPHP と Vue の間でクロスドメインを?qū)g現(xiàn)する方法を紹介します。

1. Vue のクロスドメインの問(wèn)題

Vue は、ユーザー インターフェイスを構(gòu)築するための最新の JavaScript フレームワークです。 Vue はシングルページ アプリケーションであるため、ブラウザーは、Vue コンポーネントが配置されているサーバー上のデータをフェッチするときにのみ、ドメインを越える必要があります。 Vue を使用して Ajax リクエストを送信すると、ブラウザはリクエストが同じドメインからのものであるかどうかを確認(rèn)します。そうでない場(chǎng)合は、クロスドメイン要求が行われます。

2. ThinkPHP のクロスドメインの問(wèn)題

ThinkPHP は、Web 開(kāi)発で広く使用されている強(qiáng)力なオープンソース PHP フレームワークです。 ThinkPHP では、クロスドメイン要求はデフォルトで禁止されています。 ThinkPHP でクロスドメインを?qū)g裝したい場(chǎng)合は、いくつかの設(shè)定を行う必要があります。

3. クロスドメインの問(wèn)題を解決する

Vue では、以下に示すように axios ライブラリのヘッダーを設(shè)定することでクロスドメインの問(wèn)題を解決できます。 PHP を考えてください。コントローラーに次のコードを追加できます。

import?axios?from?'axios'
axios.defaults.baseURL?=?'http://example.com';
axios.defaults.headers.common['Authorization']?=?AUTH_TOKEN;
axios.defaults.headers.post['Content-Type']?=?'application/json';

上記のコードは、すべてのクロスドメイン リクエストを許可するために、対応するヘッダー情報(bào)を追加します。

例:

header('Access-Control-Allow-Origin:?*?');
header('Access-Control-Allow-Methods:?GET,POST,PUT,DELETE');
header('Access-Control-Allow-Headers:?Origin,?X-Requested-With,?Content-Type,?Accept');

このコードでは、http://example.com からのクロスドメイン リクエストを許可します。

4. Nginx リバース プロキシはクロスドメインの問(wèn)題を解決します

Vue と ThinkPHP の間のリバース プロキシとして Nginx を使用する必要がある場(chǎng)合は、次の設(shè)定ファイルを使用できます:

header('Access-Control-Allow-Origin:?http://example.com');
header('Access-Control-Allow-Methods:?GET,POST,PUT,DELETE');
header('Access-Control-Allow-Headers:?Origin,?X-Requested-With,?Content-Type,?Accept');

上記の設(shè)定により、Vue がクロスドメイン リクエストを送信できるようになります。このうち、「Access-Control-Allow-Origin」はすべてのドメインからのリクエストを許可します。さらにセキュリティ制御を強(qiáng)化したい場(chǎng)合は、特定のドメインからのリクエストを許可するように変更できます。

5. 概要

Vue と ThinkPHP でのクロスドメイン問(wèn)題の分析と解決を通じて、クロスドメイン問(wèn)題は解決できない問(wèn)題ではないことがわかります。開(kāi)発時(shí)には共通のクロスドメインソリューションを柔軟に利用でき、実際のニーズに応じてより詳細(xì)な制御も可能です。開(kāi)発中にクロスドメインの問(wèn)題が発生した場(chǎng)合は、この記事を參照してください。お役に立てれば幸いです。

以上がThinkPHP と Vue の間でクロスドメインを?qū)g現(xiàn)する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。