最近、ThinkPHP フレームワークを使用してプロジェクトを開発しているときに、いくつかの奇妙な問題に遭遇しました。私たちのプロジェクトは畫像を表示する Web サイトですが、ブラウザでは一部の畫像が表示されず、コンソールにエラー メッセージも表示されません。検索と実験を通じて、最終的にこれがクロスドメインによって引き起こされる問題であることがわかりました。この投稿では、問題を特定して解決するためのプロセスを共有します。

まず、クロスドメインとは何かを理解しましょう。クロスドメインは、ドメイン名が異なる 2 つの Web サイト間で発生し、一方の Web サイトのリソース (JS、CSS、Ajax、畫像など) が別の Web サイトのリソースへのアクセスを要求すると、同じ制限によりブロックされます。原點(diǎn)ポリシー。同一生成元ポリシーは非常に重要なセキュリティ機(jī)能であり、Web サイトが自身と同じドメイン名、プロトコル、ポートを持つリソースにのみアクセスするように制限します。

私たちのプロジェクトでは、サードパーティのライブラリを使用して畫像を読み込みます。このライブラリは、異なるドメイン名のアドレスを使用して畫像を保存します。そのため、ブラウザではドメインをまたぐと畫像が正しく表示されません。

この問題を解決するには、サーバー側(cè)でいくつかの設(shè)定を行う必要があります。最も一般的な解決策は、サーバー側(cè)で CORS (Cross-Origin Resource Sharing) をセットアップすることです。 CORS を使用すると、サーバーはクライアント要求に応答するときにリソースにアクセスできるドメイン名を指定できます。

ThinkPHP フレームワークでは、次のコードをindex.php ファイルに追加することで CORS を?qū)g裝できます。

header('Access-Control-Allow-Origin:*');?//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');?//允許訪問的方式

このコードにより、すべてのソースがリソースにアクセスできるようになり、POST メソッドと GET メソッドがアクセスできるようになります。 。

ここで、すべてのリクエストがこの設(shè)定を使用できるように、このコードをindex.phpの先頭に配置する必要があることに注意してください。

CORS のセットアップに加えて、他の方法を使用してクロスドメインの問題を解決することもできます。たとえば、JSONP (JSON with Padding) は、クロスドメインの問題を解決するための実行可能な方法です。ページにスクリプト タグを追加することで、アクセスする必要があるデータが関數(shù)にパッケージ化され、返された結(jié)果が関數(shù)で受信されます。別のウェブサイト。

ThinkPHP フレームワークでは、次のコードを使用して JSONP メソッドを生成できます。

$callback?=?isset($_GET['callback'])???$_GET['callback']?:?'callback';
$data?=?array('name'?=>?'test',?'age'?=>?18);
echo?$callback?.?'('?.?json_encode($data)?.?')';

ここでは、まずコールバック パラメーターが GET パラメーターに存在するかどうかを確認(rèn)し、存在する場合は、パラメータを関數(shù)名として使用します。次に、返されるデータを JSON 形式にシリアル化し、コールバック関數(shù)に追加します。最後に、データを返すときに、データとともに関數(shù)をブラウザに返します。

要約すると、クロスドメインの問題は通常、開発中に非常に一般的な問題です。ただし、この問題はサーバー側(cè)の設(shè)定で解決できます。 ThinkPHP フレームワークでは、CORS または JSONP を使用してクロスドメインの問題を解決できます。この記事が困っている読者の助けになれば幸いです。

以上がthinkphpの畫像がドメインをまたいで表示されない問題の解決方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。