在Angular應(yīng)用程序的前端部分繞過CORS限制有兩個選項：（1）JSONP 和（2）Angular代理。

其中 JSONP 無法設(shè)置頭部信息，所以如果需要設(shè)置頭部信息，可以使用Angular代理。

proxy.conf.json文件是Angular應(yīng)用程序中的一個配置文件，用于配置代理服務(wù)器。它的主要作用是幫助前端開發(fā)人員在開發(fā)和調(diào)試階段解決跨域資源共享（Cross-Origin Resource Sharing，CORS）的問題。

在現(xiàn)代的Web應(yīng)用程序中，為了提高安全性，瀏覽器會實(shí)施同源策略，限制從一個源加載的資源與另一個源交互。這種限制可能導(dǎo)致前端開發(fā)人員在開發(fā)過程中遇到跨域問題，特別是當(dāng)應(yīng)用程序的前端部分與后端API部分位于不同的域名或端口時。

proxy.conf.json文件通過配置代理服務(wù)器，允許開發(fā)人員在開發(fā)過程中通過向代理服務(wù)器發(fā)送請求來解決跨域問題。該文件通常位于Angular項目的根目錄下。

proxy.conf.json文件的基本結(jié)構(gòu)是一個JSON對象，可以包含多個代理配置項。每個代理配置項由一個路徑匹配規(guī)則和一個目標(biāo)URL組成。當(dāng)應(yīng)用程序向匹配路徑規(guī)則的URL發(fā)送請求時，代理服務(wù)器會將請求轉(zhuǎn)發(fā)到目標(biāo)URL，并將響應(yīng)返回給應(yīng)用程序。

以下是proxy.conf.json文件的示例結(jié)構(gòu)：

{
  "/api/*": {
 "target": "http://localhost:3000",
 "secure": false,
 "logLevel": "debug"
  },
  "/images/*": {
 "target": "http://localhost:4000",
 "secure": false,
 "logLevel": "debug"
  }}

在上述示例中，有兩個代理配置項。第一個配置項指定了匹配路徑/api/*的請求將被轉(zhuǎn)發(fā)到http://localhost:3000。第二個配置項指定了匹配路徑/images/*的請求將被轉(zhuǎn)發(fā)到http://localhost:4000。

proxy.conf.json文件的關(guān)鍵屬性包括：

• target：指定要轉(zhuǎn)發(fā)請求的目標(biāo)URL。它可以是一個完整的URL，包括協(xié)議、主機(jī)和端口，也可以是一個相對路徑。

• secure：指定是否啟用安全的HTTP協(xié)議（HTTPS）。

• logLevel：指定日志級別，用于輸出代理服務(wù)器的日志信息。

為了在開發(fā)過程中使用proxy.conf.json文件，可以通過Angular的CLI命令來啟動開發(fā)服務(wù)器，并將其與proxy.conf.json文件關(guān)聯(lián)起來。例如，可以使用以下命令來啟動開發(fā)服務(wù)器：

ng serve --proxy-config proxy.conf.json

這樣，開發(fā)服務(wù)器將根據(jù)proxy.conf.json文件中的配置項來處理代理請求，并將相應(yīng)的請求轉(zhuǎn)發(fā)到目標(biāo)URL。

通過使用proxy.conf.json文件配置代理服務(wù)器，前端開發(fā)人員可以在開發(fā)和調(diào)試階段輕松地解決跨域問題，使前端應(yīng)用程序能夠與后端API進(jìn)行交互.

在 Angular 里使用 proxy 的方式如下。

1. 首先創(chuàng)建一個 proxy.conf.json 文件。

{
  "/api": {
 "target": "https://www.", // example endpoint
 "secure": true,
 "pathRewrite": {
   "^/api": "/kats" // rewrites the endpoint path from '/api' to '/kats'
 },
 "changeOrigin": true
  }}

1. 在 angular.json 文件的 serve 區(qū)域里，將前一步驟定義的配置文件加入：

"serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
   "browserTarget": "move-safe:build",
   "proxyConfig": "src/proxy.conf.json" // location of the config file
 },

最后調(diào)用 HTTP 請求：

getAll(): Observable<KatsResponse> {
 const url = '/api/?show=option1'; 
 // request will be sent to "https://www./kats?show=option1"
 const headers = new HttpHeaders({
   'Content-Type': 'application/json',
 });

 return this.http
   .get<KatsResponse>(url, { headers })
   .pipe();
  }