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;

使用已定义的代理运行角度项目

"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。如果您定义了使用此功能的目的，我可以为您提供更多信息。

最后，关于“访问控制允许来源”，您的服务器应将托管该应用的服务器的IP地址列入白名单。以下是基于PHP的Web服务器中的简单实现。

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

我建议您通过https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS详细了解有关CORS和原产地政策的信息。此外，还提供了一些chrome扩展程序，这些扩展程序将有助于解决CORS问题，可用于开发目的。

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

1 个答案: