Angular Proxy.Conf.Json 不适用于多个 api [英] Angular Proxy.Conf.Json not working against multiple apis

问题描述

我有以下 proxy.conf.json、日志行和 api 调用.

I have the following proxy.conf.json, log lines, and api calls.

  {
  "/first/api/": {
    "target": "/first/api/",
    "secure": false,
    "logLevel": "debug"
  },
  "/second/api/": {
    "target": "/second/api/",
    "secure": false,
    "logLevel": "debug"
  }


[HPM] GET /first/api/values-> /first/api/
[HPM] GET /second/api/dummy -> /second/api/

return this.http.get<any>(this.firstApi + 'values')
return this.http.get<any>(this.secondApi + 'dummy')

鉴于我可以看到日志行，我相信 proxy.conf.json 正确接收了 api 调用，但是当调用消失时，我收到了 404.日志只输出目标，所以我不清楚如何编写我需要的 url，例如:localhost/first/api/values

Given I can see log lines, I believe the proxy.conf.json is correctly picked up the api calls, but I'm getting a 404 when the call goes out. The logs only output the target, so it's unclear to me how to compose the url I need, for example: localhost/first/api/values

当只有一个 api 时，这可以正常工作:

This works correctly when there's only one api:

  {
  "/api/": {
    "target": "/first/",
    "secure": false
  }

有人可以建议我进一步的调试步骤吗?

已解决

yanky_cranky 的回答是正确的.作为了解他的回答与我所看到的内容有何关联的助手，我还需要查看我的 IIS 日志.在这里，我可以看到正在调用的网址.

yanky_cranky's answer was correct. As an aide in understanding how his answer related to what I was seeing, I also needed to look at my IIS logs. Here I could see what urls were being called.

推荐答案

首先，您没有正确利用 Angular 的代理概念.

Firstly, here you are not correctly leveraging the proxy concept of Angular.

1) 关于代理:代理可用于将任何请求(如/first/api")映射到您无法访问的特定域".如果 api 不是公开的，如果 api 指向不同的主机，它们将导致 cors 问题(这是浏览器的属性):{即，主机名或端口或两者都不同}借助 Angular，在我们的开发阶段，我们可以利用 Nginix 提供的相同反向代理概念并将其定位到正确的域.

1) About Proxy : Proxy can be used to map any request like '/first/api' to target specific "domain" which is out of your reach. If the apis are not public they will result in cors issue ( which is the property of browser) if the api is pointing to different host : {i.e, either hostname or port or both are different} With Angular,during our development phase we can leverage the same reverse proxy concept what Nginix provides and target to the right domain.

更多在此处代理

2) 你的 Nginix conf 将导致:以下路径:

2) your Nginix conf will result in : following paths :

  {
  "/first/api/": {
    "target": "/first/api/",  
    "secure": false,
    "logLevel": "debug"
  },

/first/api/first/api/，因此你得到 404

/first/api/first/api/ , thus you are getting 404

  "/second/api/": {
    "target": "/second/api/",
    "secure": false,
    "logLevel": "debug"
  }

/second/api/second/api/, 同 404

/second/api/second/api/ , same 404

3) 正确的配置:

 {
  "/first/api/": {

    "target": "http://localhost:{portNo}",

    "secure": false,

    "logLevel": "debug"

  },
  "/second/api/": {

    "target": "http://localhost:{portNo}",

    "secure": false,

    "logLevel": "debug"

  }

这些 api 将针对:

These api will then target to :

http://localhost:{portNo}/first/api

http://localhost:{portNo}/first/api

http://localhost:{portNo}/second/api

http://localhost:{portNo}/second/api

干杯 (y)

这篇关于Angular Proxy.Conf.Json 不适用于多个 api的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！