Angular에서 Api 프록시를 사용하는 방법에 대한 간략한 분석

이 글은 Angular에서 Api 프록시를 사용하는 방법을 소개하고, angualr을 사용하여 프록시 API 도킹에 대한 주제를 설명하는 내용이 모든 분들께 도움이 되기를 바랍니다.

프론트엔드 개발자로서 우리는 종종 백엔드와 인터페이스합니다. 그런데 도킹 과정에서 항상 도메인 간 문제가 발생하는데 어떻게 해결해야 할까요?

이 문서에서는 angualr을 사용하여 프록시 api 도킹 주제를 설명합니다. [추천 관련 튜토리얼: "angualr 来讲解代理 api 对接的话题。【相关教程推荐：《angular教程》】

首先我们先来了解下，什么跨域。

跨域

简单理解：当一个请求的协议、域名（ip地址）、端口三部分任意一个当前页面的 url 不同就是跨域。

以我的站点 https://jimmyarea.com 为例:

代理

这个时候，我们可以通过代理，本地联调不同环境的 api 地址。

首先，我们在项目的根目录上新建一个文件 proxy.conf.json。

我们以接口请求 https://jimmyarea.com/api/public/article?page=-1 为例子：

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

target 是代理的地址，pathRewrite 是对代理的前缀的重写。

完成了代理文件之后，需要开启代理。我们在 package.json 中添加多一条命令行，表明是开发环境调试使用。

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

执行 npm run dev 启动项目并带上代理。每次代理文件更改，需要重新启动下该命令行～

验证

我们新建一个 article 的服务，其中 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
      }
    })
  }

}

上面的请求，在页面上地址是 http://localhost:4200/api/public/article?page=-1，其实访问的是地址 https://jimmyarea.com/api/public/article?page=-1。我们可以在 user-list.component.tsangular Tutorial

간단한 이해:

을 의미합니다.

내 사이트 https://jimmyarea.com를 예로 들어 보겠습니다.

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

위 내용은 Angular에서 Api 프록시를 사용하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!