关于前端:使用-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();
  }