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

这对我来说基本上是一个新领域，所以我的问题更多的是关于有用的资源

我有一个apache服务器运行在端口80上，它只是承载一个javascript应用程序

这个java应用程序通过rest调用在端口8080的jetty上运行的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();
    }

}

@Singleton
@产生（MediaType.APPLICATION_JSON）
@路径（“世界工艺/任务”）
公共类QuestbookService{
私人任务书；
@注入
公共Questbook服务（Questbook Questbook）{
this.questbook=questbook；
}
@得到
@产生（MediaType.APPLICATION_JSON）
公共列表获取任务（）{
return questbook.getQuests（）；
}
}

当使用chrome进行测试时，我得到一个javascript异常：XMLHttpRequest无法加载。访问控制不允许原点允许原点

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

java堆栈使用jetty、jackson、jersy和guice来构建servlet

前端堆栈使用AngularJS进行路由

AngularJS平台托管在端口80上，带有一个常规Apache服务器

---

任何建议或提示都很好，研究主题优先。或者解释我可能做错了什么。

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

Access-Control-Allow-Origin: *

由于您的：80站点上托管了“静态”内容，因此您必须要求Apache通过mod_头添加此头。在根目录中创建包含以下内容的.htaccess文件：

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

标题集访问控制允许原点“*”

其中，参数将调用方URI分别定义为管道（|）符号分隔，或*作为通配符

出现此错误的原因是浏览器实现了“同源策略”

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

---

您可以阅读

“不允许由访问控制允许来源”似乎表明您的Java服务已发送了一个反跨站点脚本头。首先，您真的需要它们位于不同的服务器中吗？如果没有，那么将它们放在同一个应用程序中，一切都将正常工作。目标是使前端完全独立，并可由java应用程序以外的其他人托管。跨站点是至关重要的@JimGarrison您知道有什么好的文档领域可以帮助我理解如何纠正这个问题吗？我没有一个java应用程序在端口80上运行。它是一个纯javascript应用程序，运行在Apache 2.2.17托管的端口80上。java应用程序是一个纯服务器端rest服务器，使用jetty嵌入式服务器托管在端口8080上。那么，哪台服务器需要更正xsite头呢？html5应用程序服务器还是java服务器应用程序？或者这是可以在浏览器中使用angular在javascript中配置的东西。哦，我的错-我误解了你的问题。您可以要求Apache通过.htaccess文件添加标头。我将相应地调整我的答案。很遗憾，您无法通过javascript直接实现这一点。非常感谢！我真的很感激你的帮助。