java - IntelliJ 静态 Web 项目到 Tomcat 或 Angular COR

Question

我在 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.

这是我的帖子 Angular 代码:

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 上尝试过它。

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

Answer 1

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

没有配置；相同的主机

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

使用服务器端配置；不同的主机

如果 API 托管在别处，您将必须配置 API 主机。大多数服务器会让您配置访问控制，以允许特定域绕过 CORS block 。如果您有权访问要调用的服务器，请查看是否可以设置它。 enable CORS网站上有大多数服务器的示例。通常这很简单。

创建代理

这是您的 Tomcat 创意。如果您的前端调用另一项服务，则 CORS 只是一个问题。服务器脚本可以调用任何它喜欢的东西。因此，您可以使用 Tomcat(或 Apache、NGINX 或 NodeJS...)来托管将传递请求的脚本。本质上，它需要做的就是将 Access-Control-Allow-Origin: * 添加到 API 的响应中。

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

这个过程很常见。看看像 CORS anywhere 这样的节点包的流行程度就知道了。 ，这就是你的 tomcat 所做的。

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