由于某种原因，Angular-CLI 代理到后端仍然不起作用

Question

我正在使用 angular-cli，从 localhost:4200 运行项目并尝试从 myurl:8080 获取服务器请求。由于某种原因这不起作用，已尝试所有选项但没有任何帮助。

这是我的 proxy.config.json 文件：

{
  "/myservice/*": {
    "target": "http://myurl:8080",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {"^/myservice" : ""}
  }
}

一个简单的http.get：

  private Url = 'http://myurl:8080/myservice/list/getlist';

  headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
  options = new RequestOptions({ headers: this.headers, withCredentials: true});

  getList (): Observable<any> {
    return this.http.get(this.Url, this.options)
      .map(this.extractData)
      .catch(this.handleError);
  }

浏览器结果是：

403（禁止）。对预检请求的响应未通过访问 控制检查：不存在“Access-Control-Allow-Origin”标头 请求的资源。因此，原点 'http://localhost:4200' 是 不允许访问。响应的 HTTP 状态代码为 403。

如果我只是浏览http://myurl:8080/myservice/list/getlist，我会得到 JSON 结果。有没有人让它工作？

npm start @Angular/cli 写完之后

Proxy created: /myservice -> http://myurl:8080
[HPM] Proy rewrite rule create "^/myservice" ~"
[HPM] Subscribed to http-proxy events: ['error', 'close']

这正常吗？

Answer 1

问题是您试图从 localhost 调用完整的后端 url。如果您想应用“changeOrigin”代理选项，您必须尝试像这样调用后端：

http://localhost:4200/myservice 这将指向 -> http://backendUrl:8080/myservice 并且服务器会将 backendurl 视为来源。

如果我们想从 backendurl 发出 myservice 那么路径重写代理选项是 "pathRewrite": {"^/myservice" : ""}

所以尝试使用 localhost:4200/myservice 调用后端 并像这样设置代理配置：

{
  "/myservice/*": {
    "target": "http://myurl:8080",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
  }
}

提示：对于更高级的选项，由于 angular-cli 服务使用 webpack-dev-server，它也使用 http-proxy-middleware，它也使用 http-proxy，您也可以将它们的选项应用到 proxy.conf。 .js 文件。 https://github.com/chimurai/http-proxy-middleware#options

e.x cookieRewrite

const PROXY_CONFIG = [
  {
    context: [
      "/myservice"
    ],
    target: "http://backendurl",
    secure: false,
    logLevel: "debug",
    changeOrigin: true,
    cookieDomainRewrite: {
      "backendurl": ""
    }
  }
];

module.exports = PROXY_CONFIG;

Answer 2

您好，我遇到了同样的问题，您是否检查过您是否以 'ng serve --proxy-config proxy.conf.json' 开头？如果是，请尝试像这样“捕获所有代理配置”：

{
  "**": {
  "target": "http://myurl:8080",
  "secure": false,
  "changeOrigin": false,
  "logLevel": "debug"
  }}

您可以通过它测试是否有任何请求发送到您的后端服务器。