部署依赖于rest api的单页应用程序有哪些技术？答案

【问题标题】：What are some techniques for deploying a single page application that depends on a rest api?部署依赖于rest api的单页应用程序有哪些技术？
【发布时间】：2013-08-23 20:13:14
【问题描述】：

我正在构建一个单页应用程序（使用 AngularJS），该应用程序将来自它对遗留系统的 REST API 调用的数据呈现出来。这个遗留系统非常大，是用 Java 编写的，部署需要几分钟，所以我们决定开发完全独立于遗留系统的单页应用程序会更有效率。

一旦我们尝试与旧系统的 REST API 通信，就会出现问题。虽然这两个应用程序都在本地部署到同一主机，但它们部署在不同的应用程序服务器上，因此我需要在通信时使用不同的端口。但由于 SPA 正在与不同端口上的 REST API 通信，因此浏览器阻止了我的请求以防止 Cross Site Scripting 攻击。

我们发现这个构建工具名称 lineman（利用 grunt）可以轻松代理 http 请求。这让我们绕过了跨站点脚本限制，但这仅适用于开发模式。

现在我们已经获得了一个有效的概念证明，我们想知道我们应该如何在没有代理的情况下一起部署这些应用程序。我很难找到关于如何做到这一点的建议，因为 Angular 一开始并不假设你有一个后端，而且大多数在前端使用 Angular 的人并没有在后端使用 Java（如果这很重要的话） .

我们遇到了一些问题，例如，应用的上下文路径会根据它们是部署在 prod 模式还是 dev 模式而发生变化，因此我们必须想出巧妙的方法来避免在这两种模式下都有效的断开链接。我想知道我是否/在哪里走错了一步。我是否应该避免在与后端不同的服务器上开发 SPA？

【问题讨论】：

标签： java rest angularjs xss single-page-application

【解决方案1】：

我们遇到了同样的问题。 URL 的情况是，由于您处于不同的环境中，因此您的 java REST API 将具有不同的 URL 路径。

为了使这些路径向下级联到 Angular 应用程序，我们必须首先将 Web 应用程序（生成 Angular 的应用程序）中的基本路径外部化，以使用在部署期间根据部署位置设置的值.我们的应用服务器中有值链接到配置文件中的 XML 值，然后我们在应用程序中引用这些值。

然后我们创建从 Angular 应用到生成它的 web 应用（不是 java REST API）的调用，该调用将返回适合环境的 URL。

在 Angular 应用程序中，我们可以使用正确的基本路径设置资源（URL 的其余部分应在不同环境中保持相同）。

如果您可以通过外部化环境设置使第一部分正常工作，那么其余部分就不难了。

【讨论】：

好的，所以当您部署到生产环境时，您的 Angular 应用程序是否与您的旧应用程序处于同一场战争中？
没有。 Angular 应用程序与旧版应用程序完全不同。 Angular 应用程序本质上只是一个以 UI 为中心的应用程序，一旦它知道正确的基本 URL，它就会从旧应用程序获取所有数据。它从生成它的应用程序中获取基本 URL - 它本身。
那么你如何避免生产中的所有这些 XSS 问题？您是否也在生产环境中运行代理？
我们要么通过生成 Angular 的 Grails 应用代理调用，要么在允许 XSS 的应用上使用 CORS 解决方案。不知道这是否适用于您的旧版应用程序，但如果不是，您始终可以通过您的 Angular Web 应用程序进行代理。

【解决方案2】：

我会将 apache 放在前面并使用 mod_proxy 作为应用程序的反向代理。

假设您的 REST API 位于 http://localhost:9000。如果 Angular 应用程序只是静态资产，您可以直接在 apache 下部署它。如果不是，您也可以反向代理它。对于 REST api yoivsetup 一个反向代理，例如 /api 到 localhost:9000。因此，任何在http://some.host.name/api 访问 apache 的请求现在都将被转发到遗留系统。现在修复 Angular 应用程序，您就完成了。对于本地开发，您可以使用 node-http-proxy，它很容易以类似的方式进行设置

【讨论】：