由于某种原因，后端的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（禁止）。对预检请求的响应未通过访问控制检查：请求的资源上不存在“访问控制-允许-源”标头。因此，不允许访问源“http://localhost:4200”。响应具有 HTTP 状态代码 403。

如果我浏览http://myurl:8080/my service/list/getlist，我会得到JSON结果。有人成功了吗？

在npm启动后，@Angular/cli正在写入

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

这正常吗？

Answer 1

嗨，我也遇到了同样的问题，你有没有检查你是否以'ng service--proxy-configproxy.conf.json'开头？如果是，请尝试这样的“捕获所有proxyconfig”：

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

有了它，您可以测试是否有任何请求进入后端服务器。

Answer 2

问题是您正在尝试从本地主机调用完整的后端URL。如果您希望“changeOrigin”代理选项进行应用，则必须尝试像这样调用后端：

http://localhost:4200/myservice这将指向-

如果我们想从后端URL发出myservice，那么路径重写代理选项是“pathRewrite”：｛“^/myservice”：“｝

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

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

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

e. x cookie重写

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

module.exports = PROXY_CONFIG;