如何使用 maven eirslett 前端插件从我的 Angular-cli 应用程序调用不同的 api 域（后端）？答案

【问题标题】：How to call different api domain(backend) from my Angular-cli app using maven eirslett frontend plugin?如何使用 maven eirslett 前端插件从我的 Angular-cli 应用程序调用不同的 api 域（后端）？
【发布时间】：2017-07-25 13:22:57
【问题描述】：

我使用 eirslett frontend-maven-plugin 创建了一个 maven web 项目，它允许我自己安装 node、node_modules，我已经为它创建了一个 angular-cli 项目，还有一个 spring boot 独立应用程序，我正在使用它来使用休息服务。

我已经配置了一个proxy-config.json & package.json 如下：

proxy-config.json

"/api": {
    "target": "http://someipaddress:8080",
    "secure": false
}

package.json

...

"start": "ng serve --proxy-config proxy.conf.json",
...

当我简单地执行 npm start（通常为 Dev env 调用 ng serve）时一切正常，它可以使用来自我的后端 api 的数据。

但是当您在运行 ng 构建以进行部署的地方进行 maven 构建时会出现问题，似乎 CORS 会出现问题，并且 web 包不会处理 ng serve --proxy -config proxy.conf.json 因为它没有运行任何生产服务器（通常是节点服务器）并且 webpack 不会将这些配置捆绑到任何包中。

您能否帮助我解决此方案需要遵循的方法/任何其他配置。如何让我的前端与后端 API 通信并使用其其余服务，即包含将部署在 Web 服务器（通常是 tomcat）中的所有捆绑的 dist 文件夹的 WAR？

如果您遇到此问题，您能否分享一下您是如何想到这种情况的，任何资源/链接或示例都可以帮助我解决这个问题。谢谢！

【问题讨论】：

标签： angular spring-boot cors http-proxy

【解决方案1】：

proxy.conf.json专门用于开发目的，在生产中您不会运行 ng serve 或类似的东西。

在投入生产时，您通常会执行构建脚本ng build --prod，它会在dist 文件夹中创建一堆静态文件。这些文件应该部署到您的生产文件夹中。

里面有你的应用，当浏览器提供服务时，在同一个域（比如https://mysampleapp.com）下，前端文件和后端 API 正在被提供。
调用类似https://mysampleapp.com 或https://mysampleapp.com/index.html 的意思是为静态文件提供服务，调用类似https://mysampleapp.com/api/v1/people 的内容会调用后端API（API 的位置清楚地显示在您的应用上）。

现在，如果您使用 url https://mysampleapp.com 加载应用程序并且应用程序内部通常会发出类似 /api/v1/people 的请求（没有指明完全限定的主机名等），那么一切都应该可以正常工作并且不应该有任何 CORS 问题。

您必须做的确切配置实际上取决于您使用的服务器（IIS、jBoss、Apache、Nginx）和部署策略（前端/后端的不同位置，例如某些 Apache/Nginx 上的前端，然后转发到在 IIS/jBoss/Node 上运行的后端，...）。

我将就此写一些东西，因为许多人都有类似的担忧和问题（我只是没有足够的时间 atm）。来自 NGConf 的 Dan Wahlin 的演讲 触及了这个话题。他使用 Docker，但无论如何，从概念的角度来看，这适用于所有环境：https://www.youtube.com/watch?v=socWfhPJptE

【讨论】：