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

您好我遇到同样的问题，您是否检查过以'ng serve --proxy-config proxy.conf.json'开头？如果是，请尝试'catch all proxyconfig'，如下所示：

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

使用此功能，您可以测试是否有任何请求发送到您的后端服务器。

Answer 2

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

http://localhost:4200/myservice这将指向 - ＆gt; http://backendUrl:8080/myservice 和服务器将后端作为原点。

如果我们想从后端发出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-middleware，你也可以将他们的选项应用于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;

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

2 个答案: