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 に転送されます。プロキシ サーバーはバックエンドにデプロイされているため、ブラウザによって傍受されることはありません。

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

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

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);
}

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

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