IntelliJ 静态 Web 项目到 Tomcat 或 Angular COR

Posted 2023-03-04

【中文标题】IntelliJ 静态 Web 项目到 Tomcat 或 Angular COR

【英文标题】：IntelliJ Static Web Project to Tomcat or Angular CORs

【发布时间】：2016-07-30 11:00:49

【问题描述】：

我在 IntelliJ IDEA 中有一个静态 Web Angular 项目。静态页面被部署到http://localhost:63342/Calculator/app/index.html。我遇到了一个问题，我尝试将一些数据发布到服务器以获取响应，但是当我尝试发布时出现此错误：

XMLHttpRequest cannot load <url>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. The response had HTTP status code 401.

这是我的帖子角码：

WebIdServer.prototype.getId = function(id) 
    var _this = this;
    var request = 
        method: 'POST',
        url: 'https://<url>,
        headers: 
            'Authorization':'Bearer QWE234J234JNSDFMNNKWENSN2M3',
            'Content-Type':'application/json',
        ,
        data: 
            id:id
        
    ;
    _this.$log.debug(request);
    return _this.$http(request)
        .success(function(data, status, headers, config)
            _this.$log.debug("Successfull request.");
            /*called for result & error because 200 status*/
            _this.uid = data.id;
            _this.$log.debug(_this.uid);
        )
        .error(function(data, status, headers, config)
            _this.$log.debug("Something went wrong with the request.");
            _this.$log.debug(data);
            /*handle non 200 statuses*/
        );
;

我知道 post 可以工作，因为我在我在不同端口上运行的应用程序的本地 url 上尝试了它。

所以我的问题是，由于我无法从 localhost 发帖，我想知道将其部署到 tomcat 服务器是否可以解决问题。如果是这样，您如何将这个静态 Web 项目部署到 tomcat 服务器？如果这不是必需的，那么我该如何解决我遇到的这个问题？

【参考方案1】：

关于 CORS 有几件事。它是一个网络浏览器，告诉您不能拨打特定电话。这只是一个前端问题，在服务器上运行的脚本可以调用任何 api，无论位置如何。三种不同的选择：

无配置；相同的主机

如果您的服务器上没有任何配置，您前端的 AJAX 请求需要与您正在调用的服务的域和端口相匹配。在你的情况下，你在http://localhost:63342 的角度应用程序应该调用同样托管在http://localhost:63342 上的服务，然后你就很好了。没有 CORS 问题。

带有服务器端配置；不同的主机

如果 API 托管在其他地方，您必须配置 API 主机。大多数服务器将允许您配置访问控制，以允许特定域绕过 CORS 块。如果您有权访问您尝试调用的服务器，请查看是否可以设置它。 enable CORS 网站提供了大多数服务器的示例。通常这很简单。

创建代理

这是您的 Tomcat 想法。仅当您的前端调用另一个服务时，CORS 才是问题。服务器脚本可以调用它喜欢的任何东西。因此，您可以使用 Tomcat（或 Apache、nginx 或 NodeJS ...）来托管将传递请求的脚本。本质上，它需要做的就是将Access-Control-Allow-Origin: * 添加到API 的响应中。

我自己从未使用过 Tomcat，但这里有一个 blog post，可能有一些有用的信息来说明如何做到这一点。将它与enable CORS 上的信息结合起来，您应该能够将任何东西路由到任何地方。

这个过程很常见。看看像CORS anywhere 这样的节点包的受欢迎程度，这就是你的tomcat 所做的。

作为免责声明，这个想法有多好取决于您如何传递凭据和令牌。您真的不想创建一个只会使用您的凭据盲目调用其他人的 API 的服务。

【讨论】：

我无权访问我正在调用的 api，因此无法更改其任何设置。但是我有一个启动 spring boot java 应用程序，我将它部署到调用相同 api 的 tomcat 服务器上，即使它也在 localhost 上也可以工作。唯一的问题是它使用弹簧的postForObject 调用。为什么它在那里工作，但在我的 Angular 应用程序中却不行？

spring call 不是做服务器端的吗？服务器可以调用任何东西。 CORS 是您的浏览器，告诉您无法执行请求。

哦，我明白了。嗯。那么所有网络应用程序解决这个问题的方法是通过将它们的请求代理到调用 api 的 tomcat 脚本？假设他们像我一样无法控制上述 api。

对于 api 可能超出您的控制范围。还有一些其他技巧，比如 JSONP 可以绕过这个，但我不经常遇到。我一般代理他们。但是，我的大部分后端也是由我编写的，我可以只允许 URL ;) 编辑；不必是tomcat，任何合适的服务器脚本都可以。