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文件，并且正在运行。我在这里留个例子。

注意：我使用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中使用代理配置文件。您也可以在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

的HttpClient：

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

proxy.conf.json

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

需要设置"*"以捕获本地位置

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
  }
}

希望对您有所帮助基督徒

Answer 4

我遇到了同样的问题...为了使我的前沿产品投入生产，我使用了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": ""}
    }
  }

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

4 个答案:

proxy-prod.config.json

proxy-local.config.json

angular.json