JavaScriptプロジェクトURLは使用できません

現代の Web 開発において、JavaScript は非常に重要な言語です。インタラクティブで動的なページを提供できます。しかし、実際の開発では、JavaScript プロジェクト内の URL が使用できないという問題に遭遇することがよくあります。

この問題は実際には非常に一般的です。 JavaScript プロジェクトで URL を使用しようとすると、次のエラー メッセージが表示される場合があります。

XMLHttpRequest cannot load http://example.com/resource. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

これは、ブラウザが JavaScript プロジェクトのサーバー上のリソースに対する要求を拒否したことを意味します。これは、クロスサイト リクエスト攻撃 (CSRF) を防ぐためです。

それでは、この問題をどうやって解決すればいいのでしょうか?以下にいくつかの解決策を示します:

1. プロキシ サーバーを使用する

プロキシ サーバーは、クロスドメイン リクエストの問題を解決できます。プロキシ サーバーを JavaScript プロジェクトのブリッジとして使用して、ターゲット リソースをリクエストできます。たとえば、http-proxy-middleware ミドルウェアを使用してプロキシ サーバーを実装できます。

このミドルウェアは Node.js のバックエンドにデプロイして、JavaScript プロジェクトで使用できます:

// 在JavaScript工程中使用
app.use('/api', proxy({ target: 'http://example.com', changeOrigin: true }));

このコードは、/api# URL で始まるすべての JavaScript プロジェクトを削除します## で始まるリクエストは http://example.com に転送されます。プロキシ サーバーはバックエンドにデプロイされているため、ブラウザによって傍受されることはありません。

2. CORS ヘッダーの追加

CORS (Cross-Origin Resource Sharing) は、クロスドメインのリソース共有メカニズムです。サーバーが CORS をサポートしている場合は、応答ヘッダーに

Access-Control-Allow-Origin ヘッダーが追加され、アクセスが許可されるソースのリストを指定できます。

サーバー側のコードを変更する権限がある場合は、次のヘッダーを応答ヘッダーに追加できます:

Access-Control-Allow-Origin: http://localhost:3000

この方法では、ブラウザーは JavaScript プロジェクトのリクエストをインターセプトしません。

3. JSONP の使用

JSONP は、クロスドメイン リクエストを可能にするテクノロジーです。その原則は、script 要素の src 属性を使用して同一生成元ポリシーによる制限を受けないようにすることで、他のドメイン名から JavaScript ファイルを読み込むことができます。

サーバー側のコードを変更できない場合、またはサーバーが CORS をサポートしていない場合は、JSONP の使用を試すことができます。具体的な方法は、次のコードを JavaScript プロジェクトに追加することです。

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com/resource?callback=onResponse';
document.head.appendChild(script);

function onResponse(data) {
  console.log(data);
}

この例では、script 要素を JavaScript プロジェクトに追加し、src 属性をターゲット リソースの URL に設定しました。

callback パラメータをコールバック関数に設定します。この関数は、ターゲット リソースがロードされた後に呼び出されます。ターゲット リソースから返されたデータは、コールバック関数で処理できます。

要約すると、JavaScript プロジェクトで URL を使用できない場合は、プロキシ サーバーの使用、CORS ヘッダーの追加、または JSONP の使用という、上記の 3 つの解決策のいずれかを使用できます。さまざまな状況に応じてさまざまな解決策を選択することで、この問題をスムーズに解決できます。

以上がJavaScriptプロジェクトURLは使用できませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。