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

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 server - how to proxy API requests to another server?

我设置了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 文件仅在您的本地环境中工作，这些是 angular-cli 服务器的配置。

我为本地和生产制作了不同的 proxy.config.json 文件(当我在本地从浏览器发出请求时，它将被重定向到生产)。我使用 pathRewrite 重写请求的 url，因此如果我请求 http://localhost:4200/client-api/stores 它将重定向到 https:///www.your-web.com/api/stores

proxy-prod.config.json

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

proxy-local.config.json

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

在 angular.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"
            },
          }
        },
...

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