松散耦合的用JavaScript编写的ui托管在端口8080上，如何使用json与运行在端口80上的java应用程序通信

Question

这对我来说基本上是一个新领域，因此我的问题更多是在有用的资源上。

我有一个在端口80上运行的apache服务器，该服务器仅托管一个javascript应用程序。

该Java应用程序通过对在端口8080上的码头运行的Java应用程序的其余调用获得其数据。

对于前端，我正在使用AngularJS。 我的请求服务如下所示：

(function(ng, app){
    "use strict";
    app.service(
    "questService",
    function( $q, $http, _, categoryService ) {
        function($q, _, $http){
            function getQuestsFromServer(){
                $http({method: 'GET', url: 'http://localhost:8080/worldcraft/quests'}).
                success(function(data, status, headers, config) {
                    console.log("SUCESS!! {status: " + status + " \nData:" + data + "}");
                }).
                error(function(data, status, headers, config) {
                    console.log("FAILURE!! {status: " + status + " \nData:" + data + "}");
                });             
            }
        }
        return getQuestsFromServer : getQuestsFromServer;
    })
})(angular, Worldcraft);

在Java应用程序中，我有这样的服务

@Singleton
@Produces(MediaType.APPLICATION_JSON)
@Path("worldcraft/quests")
public class QuestbookService {

    private Questbook questbook;

    @Inject
    public QuestbookService(Questbook questBook) {
        this.questbook = questBook;
    }

    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public List<Quest> getQuests() {
        return questbook.getQuests();
    }

}

使用chrome进行测试时，出现了JavaScript异常：XMLHttpRequest无法加载http://www.myserver.com:8080/worldcraft/quests 。 Access-Control-Allow-Origin不允许使用来源http://www.myserver.com 。

经过研究，似乎正确的解决方案是使用JSONP。 但是我没有在网上看到任何能真正帮助我了解如何使用现有技术来做到这一点的东西。

Java堆栈使用jetty，jackson，jersy和guice来掩盖servlet。

前端堆栈使用AngularJS进行路由。

AngularJS平台通过常规Apache服务器托管在端口80上。

任何建议或技巧都很好，最好是研究主题。 或解释我可能做错了什么。

Answer 1

在端口80上运行的Java应用程序必须将特定的标头写入其响应流：

Access-Control-Allow-Origin: *

由于您在：80站点上托管了“静态”内容，因此您将不得不要求Apache通过mod_headers添加此标头。 使用以下内容在根目录中创建一个.htaccess文件：

<filesmatch ".*">
Header set Access-Control-Allow-Origin "*"
</filesmatch>

其中参数定义了由竖线（|）或*作为通配符分别分隔的主叫方URI。

您收到此错误的原因是因为浏览器实施了“相同来源策略”。

此更改需要在您的源应用程序上实现。

您可以在此处阅读标题参考。