Angular で API プロキシを使用する方法の簡単な分析

この記事では、Angularで API プロキシを使用する方法を紹介し、プロキシ API ドッキングのトピックを説明するために angualr を使用する方法について説明します。

フロントエンド開発者として、私たちはバックエンドとやり取りすることがよくありますが、ドッキング プロセスでは常にクロスドメインの問題に遭遇します。ソリューション？

この記事では、angualrを使用して、エージェントapiのドッキングのトピックを説明します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

まず、クロスドメインとは何かを理解しましょう。

クロスドメイン

簡単な理解:リクエストが行われるとき、プロトコル、ドメイン名(IPアドレス) )、port3 つの部分現在のページのurlの違いは、クロスドメインです。

https://jimmyarea.comを例として挙げます:

##エージェント現時点では、プロキシを使用して、さまざまな環境の

アドレスをローカルで共同デバッグできます。まず、プロジェクトのルート ディレクトリに新しいファイル

を作成します。インターフェースリクエスト

を例として取り上げます:

{ "/api": { "target": "https://jimmyarea.com/", "changeOrigin": true, "secure": false, "pathRewrite": { "^/api": "/api" } } }

はプロキシのアドレス、pathRewriteはプロキシのプレフィックスの書き換えです。プロキシ ファイルの作成が完了したら、プロキシを有効にする必要があります。

にコマンド ラインを 1 つ追加し、開発環境でのデバッグに使用されることを示します。

"script": { "dev": "ng serve --proxy-config=proxy.conf.json", }

プロジェクトを開始し、エージェントを導入します。プロキシ ファイルが変更されるたびに、コマンド ラインを再起動する必要があります~

検証新しい

article.service.tsファイルの内容は次のとおりです:

import { Injectable } from '@angular/core'; // http 客户端 import { HttpClient } from '@angular/common/http' @Injectable({ providedIn: 'root' }) export class ArticleService { constructor( private http: HttpClient ) { } // 获取文章列表 getArticleList() { return this.http.get('/api/public/article', { // 返回类型 responseType: 'json', // 请求的参数 params: { page: -1 } }) } }

https://jimmyarea.com/api/public/article?page=-1にアクセスします。user-list.component.tsで呼び出して確認できます:

ngOnInit():void { this.articleService.getArticleList().subscribe({ next: (data: any) => { console.log(data) }, error: () => {} }) // ... }

Good Job, Bro.

[終了]

プログラミング入門

以上がAngular で API プロキシを使用する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。