如何使用代理设置部署Angular应用

Question

我有一个代理配置文件，该文件具有API（网络服务）链接，可用于对我们的数据库进行调用。使用 npm start 可以使该代理配置在本地正常运行。

现在，我需要将此应用程序部署到IIS上的生产Windows服务器。 我使用了 ng build 和 ng build --prod ，看起来这不是通过代理设置生成的。 我需要有关如何生成具有代理设置的构建的帮助，以便将其部署到产品服务器。

Api部署在其他某个域上，而此角度应用程序将部署在其他某个域上。

谢谢

Answer 1

代理配置文件用于本地开发Web服务器。使用它的主要原因是，这样可以避免在本地计算机上开发Angular应用和api时避免跨域请求，而不必在api中允许跨域请求。

当您发布产品时，不支持代理配置文件。您将发布到生产Web服务器。

如果您的api托管在同一个域中，则不需要代理请求，因为它们不是跨域的；如果api在另一个域上，则您需要允许api中的跨域请求。

Answer 2

要将 Angular 8 应用程序部署到生产环境

您可以使用环境功能，例如：

用于开发

proxy.conf.json

{
  "/api": {
      "target": "http://localhost:3000/api",
      "secure": false,
      "pathRewrite": {"^/api" : ""}
    }
}

您在 environments / environment.ts

中设置了后端baseURL

export const environment = {
  production: false,
  backend: {
    baseURL:"http://localhost:3000/api"
  }
};

在服务中，使用 baseURL ：

  baseUrl: string = environment.backend.baseURL;

  getAll(): Observable<UsersResponse> {
    return Observable.create(observer => {
     this.http.get<AccountsResponse>(`${this.baseUrl}` + '/users')
        .subscribe((result) => {
          const accountsResponse = result;
          observer.next(accountsResponse);
          observer.complete();
        });
    });
  }

使用实时服务进行开发：

$ng serve --proxy-config proxy.conf.json  --host 0.0.0.0 --port 4200

开发网址：

http://localhost:4200/yourapp

正在运行的服务将启用CORS并将API调用发送到

http://localhost:3000/api/v1

用于部署到生产环境

用于生产的构建命令：

$ng build --prod --base-href=/yourapp/

该服务将从产品环境配置中获取 baseURL ：

environments / environment.prod.ts

export const environment = {
  production: true,
  backend: {
    baseURL:"http://example.com/api"
  }
};

因此，通过使用不同的环境，您可以配置不同的api url。 请记住，要在生产Web服务器中启用CORS，默认情况下，浏览器不允许连接到与为Angular应用程序提供服务的域不同的域。

Answer 3

选项 1：不使用 IIS 服务器。

您可以使用 node 和 express 创建一个应用程序来为您的静态文件提供服务并成为您的 api 服务器，它将调用正确的服务器（几乎就像一个重定向）

ng serve --proxy-config 可能做的是运行一个节点服务器，将您的应用程序公开为静态并根据您的配置运行 api 重定向（调用服务器）到服务器。

当我们从节点服务器调用 api 时，没有 CORS，因为我们没有像 Web 应用程序那样的主机名。

---

选项 2：使用 IIS 和节点/快速应用程序## 标题 ##

您可以创建一个应用程序并允许 CORS 用于您的主机名。从此应用程序中，您可以公开通用 api 并调用正确的 api 服务器。