AngularJS アプリケーションでの CORS エラーを解決するにはどうすればよいですか?

AngularJs で CORS を処理する方法

Cross-Origin Resource Sharing (CORS) は、異なるオリジンからのアクセス制御されたリソースを許可するメカニズムです。クライアントの発行元に関係なく、Web アプリケーションからリクエストされるapplication.

エラーについて

CORS 問題は、Web ページが独自のドメインとは異なるドメインからリソースにアクセスしようとすると発生します。通常、ブラウザはセキュリティ上の理由からこの動作を制限します。クエリに記載されているエラー「XMLHttpRequest は URL を読み込めません。Origin not allowed by Access-Control-Allow-Origin」は、CORS 制限によりリクエストがサーバーによって承認されていないことを示しています。

解決策

AngularJs は単独では CORS 制限をバイパスできないことに注意することが重要です。 CORS はサーバー側で有効にする必要があります。サーバーは、ブラウザーがリクエストを許可するために必要な情報を含むように応答ヘッダーを構成する必要があります。

サーバー側の構成

サーバー テクノロジと Web サーバーによって異なります。使用する場合、CORS を有効にするための具体的な構成手順は異なります。一般に、次のような適切なヘッダーを HTTP 応答に追加する必要があります。

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type, Authorization

ベスト プラクティス

• 「*」の代わりに特定のオリジンを使用して、リソースへのアクセスを許可するドメインを制御します。
• 意図しないものを防ぐために、許可される HTTP メソッドを制限します。リクエスト。
• 交換できるデータの種類を制御するために、許可されるリクエスト ヘッダーを指定します。

設定例 (Node.js)

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://example.com');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  next();
});

結論

有効化サーバー側の CORS は、AngularJs アプリケーションの CORS 問題を解決するために不可欠です。応答ヘッダーを適切に構成することで、さまざまな発信元からのリソースへのアクセスを許可し、シームレスなユーザー エクスペリエンスを確保できます。

以上がAngularJS アプリケーションでの CORS エラーを解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。