关于前端:使用-Angular-proxy-解决前端跨域问题

6次阅读

共计 1924 个字符，预计需要花费 5 分钟才能阅读完成。

在 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 的形式如下。

首先创立一个 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
  }
}

在 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();}

正文完