使用 Angular proxy 解决前端跨域问题

在Angular应用程序的前端部分绕过CORS限制有两个选项：（1）JSONP 和（2）Angular代理。

其中 JSONP 无法设置头部信息，所以如果需要设置头部信息，可以使用Angular代理。

proxy.conf.json文件是Angular应用程序中的一个配置文件，用于配置代理服务器。它的主要作用是帮助前端开发人员在开发和调试阶段解决跨域资源共享（Cross-Origin Resource Sharing，CORS）的问题。

在现代的Web应用程序中，为了提高安全性，浏览器会实施同源策略，限制从一个源加载的资源与另一个源交互。这种限制可能导致前端开发人员在开发过程中遇到跨域问题，特别是当应用程序的前端部分与后端API部分位于不同的域名或端口时。

proxy.conf.json文件通过配置代理服务器，允许开发人员在开发过程中通过向代理服务器发送请求来解决跨域问题。该文件通常位于Angular项目的根目录下。

proxy.conf.json文件的基本结构是一个JSON对象，可以包含多个代理配置项。每个代理配置项由一个路径匹配规则和一个目标URL组成。当应用程序向匹配路径规则的URL发送请求时，代理服务器会将请求转发到目标URL，并将响应返回给应用程序。

以下是proxy.conf.json文件的示例结构：

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

在上述示例中，有两个代理配置项。第一个配置项指定了匹配路径/api/*的请求将被转发到http://localhost:3000。第二个配置项指定了匹配路径/images/*的请求将被转发到http://localhost:4000。

proxy.conf.json文件的关键属性包括：

• target：指定要转发请求的目标URL。它可以是一个完整的URL，包括协议、主机和端口，也可以是一个相对路径。
• secure：指定是否启用安全的HTTP协议（HTTPS）。
• logLevel：指定日志级别，用于输出代理服务器的日志信息。

为了在开发过程中使用proxy.conf.json文件，可以通过Angular的CLI命令来启动开发服务器，并将其与proxy.conf.json文件关联起来。例如，可以使用以下命令来启动开发服务器：

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

这样，开发服务器将根据proxy.conf.json文件中的配置项来处理代理请求，并将相应的请求转发到目标URL。

通过使用proxy.conf.json文件配置代理服务器，前端开发人员可以在开发和调试阶段轻松地解决跨域问题，使前端应用程序能够与后端API进行交互.

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

1. 首先创建一个 proxy.conf.json 文件。

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

2. 在 angular.json 文件的 serve 区域里，将前一步骤定义的配置文件加入：

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

最后调用 HTTP 请求：

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

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