用于开发和生产的角度代理配置

Question

当我导入HttpClient调用我自己编写的 node.js API 时，URL 的设置存在一些问题。

例如：

import { HttpClient, HttpHeaders } from '@angular/common/http';

export class myComponent implements OnInit {

    constructor(
    private http: HttpClient,
    ) {}

    ngOnInit(): void {
       this.http.get('http://127.0.0.1:3000/getData/theme').subscribe(data => {

       });
    });
}

//angular default port 4200,
//node.js default port 3000,

当我设置this.http.get('/getData/theme')了get将呼叫http://127.0.0.1:4200，这是错误的。如果我this.http.get('http://127.0.0.1:3000/getData/theme')为本地开发设置它的工作原理。但是，当ng build设置到实际服务器时，它无法正常连接。

控制台：

GET http://127.0.0.1:3000/getData/theme 
net::ERR_CONNECTION_REFUSED

GET http://localhost:3000/structureData/themeData 
net::ERR_CONNECTION_REFUSED

如何设置正确的 URL 以使其同时满足在线和本地开发状态？

---

angular-cli 服务器 - 如何将 API 请求代理到另一台服务器？

我设置了 package.json：

"start": "ng serve --proxy-config proxy.conf.json"

和

proxy.conf.json
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

它不起作用：

this.http.get('/getData/theme')

GET http://localhost:4200/getData/theme 404 (Not Found)

或者

this.http.get('/api/getData/theme')

GET http://localhost:4200/api/getData/theme 404 (Not Found)

Answer 1

我认为这是因为您错过了“changeOrigin”属性。

我有用于本地和生产的不同 proxy.config.json 文件并且它正在工作。我在这里留下一个例子。

注意：我用来pathRewrite从 url 中删除该字符串。所以如果我请求http://localhost:4200/client-api/stores它会重定向到https://www.your-web.com/api/stores

代理-prod.config.json

"/client-api/*": {
    "target": "https://www.your-web.com/api",
    "pathRewrite": { "^/client-api": "" },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }

代理-local.config.json

"/client-api/*": {
    "target": "http://localhost:22222",
    "pathRewrite": { "^/client-api": "" },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }

在 angular.json 中使用代理配置文件。您也可以在 package.json 中执行此操作，但我更喜欢这种方式。

angular.json

...
       "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "proxyConfig": "src/proxy-local.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production",
              "proxyConfig": "src/proxy-prod.conf.json"
            },
          }
        },
...

如果运行ng serve，应用程序将使用本地代理。使用ng serve --prod进行生产。

Answer 2

我遇到了同样的问题......为了将我的前端投入生产，我使用 Nginx。如果你有同样的场景，你可以这样做：

location /api {
       rewrite /api/(.*) /$1  break;
       proxy_pass http://exempleApi.com
}

这等于您在开发中使用的 proxy.config.json ：

  {
    "/api/*": {
      "target": "http://exempleApi.com",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": "true",
      "pathRewrite": {"^/api": ""}
    }
  }

Answer 3

我使用这个 proxy.conf.json

 {
    "/Api/Workflow/Preview/*": {
        "target": "https://subdomain.domain.com/",
        "protocol": "https:",
        "secure": false,
        "changeOrigin": true
    }
}

我相信你必须编写这个 proxy.conf.json：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}