0

最近、次のエラーが発生しました。

オリジン ' http://localhost:4200 ' から 'localhost:8080/api/xyz' にある XMLHttpRequest へのアクセスが CORS ポリシーによってブロックされました: クロス オリジン リクエストは、プロトコル スキームでのみサポートされます: http、data、chrome、chrome-extension 、https。

Angular はこれに対する簡単な解決策を提供していますが、それを見つけるのに十分な時間がかかりました。Angularのドキュメントでも、SOで簡単なことは何も見つかりませんでした。

明らかに、このエラーは Angular とはまったく関係ありません。ほとんどすべての開発者がこのエラーに遭遇することがあると思います。重要なことを続けられるように、簡単な解決策を共有したいと思います。

まず私のセットアップ: Angular 7、およびHttpClient( doc )の使用

私は小さなサービスを作成しました：

export class HelloServerService {
  private readonly rootApi: string = 'http://localhost:8080/api/';

  constructor(@Inject(HttpClient) private readonly http: HttpClient) {
  }

  public getHelloWorld(name: string): Observable<string> {
    return this.http.get(this.rootApi + name, {responseType: 'text', params: {}}) as Observable<string>;
  }
}
4

1 に答える 1

2

覚えておいてください：この回答は開発目的のみです

まず第一に、重要な問題は、新しいブラウザーがクロスオリジン要求をブロックしていることでした。これには、ポート番号の区別も含まれます。

だからlocalhost:4200と同じ起源ではありませんlocalhost:8080

プロキシを使用することは、おそらくこれを解決する最も簡単な方法です

Angular CLI には、定義されたすべての API 呼び出しを任意の宛先に委任する単純なプロキシを簡単に構成する機能があります。

Richard Russell のこの記事では、プロキシを構成する方法について説明しています。

要するに：

新しいファイル proxy.conf.json を作成します

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api": ""
    }
  }
}

angular.json に追加します

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "xyz:build",
            "proxyConfig": "proxy.conf.json"
          },

ng serve を介して実行します。

期待される出力は多少:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
[HPM] Proxy created: /api  ->  http://localhost:8080
[HPM] Proxy rewrite rule created: "^/api" ~> ""
于 2019-03-17T12:20:08.173 に答える