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

Question

package.json 文件:

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

服务等级:

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

代理.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 直接传递给 varibale，我会收到 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource 错误。我是新手。请帮忙。

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 问题，可用于开发目的。