Angular サービスで CORS エラー「リ​​クエストはプロトコル スキーム http... でのみサポートされています」が発生する理由と修正方法

CORS エラー: 「リクエストはプロトコル スキーム: http... でのみサポートされています...」 説明と解決策

HTTP リクエストが行われたとき異なるオリジン間では、Cross-Origin Resource Sharing (CORS) メカニズムによりブラウザによってブロックされる可能性があります。この制限により、リクエストを行ったサイト以外のオリジンからのリソースへの不正アクセスが防止されます。

指定されたシナリオでは、Angular サービスは、localhost:4201/ticker で実行されている Express バックエンドから JSON 応答を取得しようとしています。ただし、リクエストは次のエラーで失敗します: 「XMLHttpRequest は localhost:4201/ticker を読み込めません。クロスオリジンリクエストはプロトコルスキームでのみサポートされています: http、data、chrome、chrome-extension、https。」

にもかかわらずExpress サーバーの cors モジュールを使用して CORS 処理を実装しようとすると、エラーが継続します。提供されたコード スニペットから、Angular サービスで使用されている URL がプロトコル スキームを指定していないことがわかり、これが CORS エラーの原因となっています。

この問題を解決するには、Angular サービスの URL を更新して、 http:// プロトコル スキーム。 URL に「http://」を追加すると、リクエストは HTTP リクエストとして正しく解釈され、CORS 検証に合格できるようになります。

Angular サービスのコードの修正されたセクション:

this._baseUrl = 'http://localhost:4201/';

この変更が行われると、Angular サービスは CORS に遭遇することなく、Express バックエンドへのリクエストを正常に実行し、JSON レスポンスを取得できるようになります。エラー。

以上がAngular サービスで CORS エラー「リ​​クエストはプロトコル スキーム http... でのみサポートされています」が発生する理由と修正方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。