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

フロントエンド開発者として、私たちは頻繁にバックエンドとインターフェースをとりますが、ドッキングプロセス中に常にクロスドメインの問題に遭遇します。その場合、どのように解決すればよいでしょうか?

この記事では、 angualr使用してエージェントapiドッキングのトピックを説明します。 【おすすめ関連チュートリアル：「Angularチュートリアル」】

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

クロスドメイン

:协议、域名（ip地址）、端口の 3 つの部分の任意一个のurlと現在のページが異なる場合、それはクロスドメインです。

私のサイトhttps://jimmyarea.com例に挙げます。

現時点では、プロキシを使用して、さまざまな環境のapiアドレスをローカルで共同デバッグできます

。

まず、プロジェクトのルート ディレクトリに新しいファイルproxy.conf.jsonを作成します。

例としてインターフェイス リクエストhttps://jimmyarea.com/api/public/article?page=-1を取り上げます。

{
  "/api": {
    "ターゲット": "https://jimmyarea.com/",
    "changeOrigin": true、
    「安全」: false、
    "パスリライト": {
      "^/api": "/api"
    }
  }

は

targetのアドレス、 pathRewriteエージェントのプレフィックスの書き換えです。

プロキシ ファイルの作成が完了したら、プロキシを有効にする必要があります。 package.jsonにコマンド ラインを 1 つ追加し、開発環境でのデバッグに使用されることを示します。

「スクリプト」: {
  "dev": "ngserve --proxy-config=proxy.conf.json",

実行

npm run devてプロジェクトを開始し、エージェントを起動します。プロキシ ファイルが変更されるたびに、コマンド ラインを再起動して、

ことを確認する

article article.service.tsの内容は次のとおりです。

import { Injectable } from '@angular/core' ;
// http クライアントインポート { HttpClient } から '@angular/common/http'

@Injectable({
  提供対象: 'ルート'
})

エクスポートクラス ArticleService {

  コンストラクタ（
    プライベート http: HttpClient
  ) { }
   
  // 記事リストを取得 getArticleList() {
    return this.http.get('/api/public/article', {
      //戻り値の型responseType: 'json',
      //リクエストパラメータ params: {
        ページ: -1
      }
    })
  }

リクエスト

の場合、ページ上のアドレスはhttp://localhost:4200/api/public/article?page=-1です。実際にアクセスされるアドレスはhttps://jimmyarea.com/api/public/article?page=-1です。 https://jimmyarea.com/api/public/article?page=-1 。 user-list.component.tsで呼び出して確認できます。

ngOnInit():void {
  this.articleService.getArticleList().subscribe({
    次: (データ: 任意) => {
      コンソール.ログ(データ)
    }、
    エラー: () => {}
  })
  // ...
プログラム

が実行されると、コンソールに次のネットワーク リクエストが表示されます。

よかったですね、バックエンドから与えられたアドレスを完全にプロキシしてデバッグできます。プロキシは複数のアドレスをプロキシできます。リーダーは複数のプロキシ アドレスを書き込んで検証できます~

[終了]