如何在 Angular 2 中设置反向代理

Question

package.json 文件：

"start": "gulp serve.dev --color",

服务等级：

this.mapUrl = @apiproxy
return this.http.post(this.mapUrl, body, { headers: this.headers })

Proxy.config.json：

{
"/@apiproxy/*": {
"target": "http://url:8080",
"secure": false,
"logLevel": "debug",
"pathRewrite": {"^/@apiproxy" : ""}
 }
}

我试图将我的 package.json 文件更改为

"start": "gulp serve.dev --proxy-config proxy.conf.json --color",

但这无济于事。如果我将 url 直接传递给变量，我将收到对预检请求的响应未通过访问控制检查：请求的资源错误中不存在“Access-Control-Allow-Origin”标头。我是角度的新手。请帮忙。

Answer 1

首先，我们需要设置代理。 Angular 项目已经为此提供了一个 proxy.conf.js 文件。以下代理脚本说明如果前端应用程序进行 API 调用，其路径中有 /api（即http://localhost:4200/api/），然后将该请求转换为目标路径。

这意味着http://localhost:4200/api/ 被代理到http://localhost:8081/api/。使用代理的优点之一是它有助于隐藏服务器详细信息。在我们的例子中 localhost:8080 是我们的服务器。

const PROXY_CONFIG = [
      {
        context: [
          "/api/"
        ],
        target: "http://localhost:8081/",
        changeOrigin: true,
        secure: false
      }
    ];

    module.exports = PROXY_CONFIG;

使用定义的代理运行 Angular 项目

"scripts": {
    "start": "ng serve --proxy-config proxy.conf.js",
  }

在您的服务中，只需使用相对 url。例如

 public getClientConfig(): Observable<any> {
    return this.http.get(`/api/config`);
  }

当从前端应用发出请求时，它变为http://localhost:4200/api/config，相当于http://localhost:8081/api/config。

我不确定你为什么要使用 gulp。如果您定义了使用它的目的，我可以为您提供更多信息。

最后，关于“Access-Control-Allow-Origin”，您的服务器应将托管应用程序的服务器的 IP 地址列入白名单。以下是基于 PHP 的 Web 服务器中的简单实现。

<?php header('Access-Control-Allow-Origin: youripaddress'); ?>

我建议通过https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS 了解有关 CORS 和同源政策的更多详细信息。此外，还有一些 chrome 扩展，有助于修复 CORS 问题，可用于开发目的。