开发和生产环境下的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服务器-如何将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)

or

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

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

- Finn

---

请参阅建议的重复问题。如果您正在使用命令行界面，可以使用代理配置，该配置将路由到您选择的主机（服务器和端口可配置）。 - Igor

@Igor 代理配置旨在在通过 ng serve 运行开发服务器时代理调用。运行 ng build 后，您需要负责 Web 服务器及其配置。 - Vikas

"/api" 是一个模式。任何以 "/api" 开头的 URL 都将通过代理路由。"/getData" 不以 "/api" 开头。如果你想要捕获所有请求，可以使用空字符串。 - Igor

我尝试了两种方法来添加/api或不添加，但路由器没有将其导向正确的位置（3000）。 - Finn

整个“代理文件”这件事完全是胡扯，我认为这表明Angular正在慢慢地滑向垃圾桶…… - Jim

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

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

- adrisons

---

你好 @DavidSagang，这个 proxy.config.json 只在开发环境下起作用，因为 Angular 服务器使用它。当在浏览器中从不同的 URL 接收数据时，会发生 CORS 错误，而不是你的应用程序所服务的 URL。解决 CORS 错误的更简单的方法是从你的服务器发起 HTTP 调用，并让你的 Web 应用程序从你的服务器请求它。 - adrisons

这是关于ng build的问题，而不是ng serve --prod。 - Lenzman

@adrisons，你写道它只适用于开发环境，但是你有一个proxy-prod文件。我有3个环境：localhost、staging和production，我为每个环境创建了一个代理文件，这样可以吗？ - Offir

@adrisons，我在“staging”环境中测试通过，我认为在“production”环境中也会正常工作。我的应用程序托管在“IIS”中。请查看我发布的问题： https://stackoverflow.com/questions/72782387/using-angular-proxy-for-multiple-environments - Offir

@Offir，如果您能将我的答案标记为有帮助的，那就太好了 :) - adrisons

Answer 2

我曾经碰到过同样的问题......为了将我的前端服务部署到生产环境中，我使用了Nginx。如果你有类似的情况，可以这样做：

我遇到了相同的问题... 为了将我的前端服务部署到生产环境中，我使用了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": ""}
    }
  }

- Diego Silva

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

- Luiggi

Answer 4

有时候我们想要使用 Ng 生产部署文件，而不需要运行 Ng 服务器，因此我们只需要使用 Angular 输出(dist)。

当我们拥有本地开发环境时，我们的 Web 服务器上的代理选项可以设置为充当代理服务器。

需要将 Nginx 添加到 Dockerfile 中，并在 Dockerfile 中添加一个代理选项文件。Dockerfile 使用简单的复制命令来设置代理。

production.nginx.proxy.conf

server {   listen 80;   listen [::]:80;   server_name localhost;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm; 
    try_files $uri $uri/ /index.html =404;
}

  location /identity {
    proxy_pass http://yourapi.com; }

  location /someroute{
    proxy_pass http://yourapi.com:5021; } 
}

Dockerfile

FROM node:18-alpine as build
WORKDIR /usr/local/app
COPY ./ /usr/local/app/
COPY package*.json ./
RUN npm install -g npm@latest
RUN npm install --force
RUN npm run build --prod

FROM nginx:1.21.6
# ---- We set our proxy configuration in the following line ----
COPY production.nginx.proxy.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/local/app/dist/your-project-name /usr/share/nginx/html

EXPOSE 80

- Shervin Ivari