XMLHttpRequest无法加载* ... *原点：*不允许Access-Control-Allow-Origin

Question

我正在尝试使用extjs存储与一个返回Json的Jersey休息Java应用程序（在tomcat上运行）进行通信。 我正在尝试使用Json打印到网格组件。 这是我的商店代码。

Ext.define('WSC.store.Users', {
extend: 'Ext.data.Store',
fields: ['period','tot_units', 'tot_selling_price'],
model: 'WSC.model.User',
proxy: {
    type: 'rest',
    url : 'http://localhost:8080/mondrianCube/services/query/querygoeshere/json',
    reader: {
        type: 'json',
        root: 'table'
    }
},
autoLoad: true

}）;

商店无法读取所获得的json。大多数建议是将响应头（Access-Control-Allow-Origin）添加到webapp（在tomcat上运行）。 所以我添加了如下的响应标题。

@Path("/query/{qryParam}/json")
@GET
@Produces(MediaType.APPLICATION_JSON)
public static Response jsonResult(@PathParam("qryParam") String qryParam) throws JSONException 
{
    executeQuery("select {[Measures].members} on columns, {Time.[2010], Time.[2010]} on rows from sales" );
    String json = (new JSONObject(((new ResultSetConvert(result)).toJson()))).toString();
    return Response.ok(json).header("Access-Control-Allow-Origin","*").build();     
}

即便如此，我也会收到与下面相同的错误

我在这里缺少什么？

P.S如果url指向同一域中的文件，则商店可以读取文件中的json。

Answer 1

我相信你会想要使用JSONP，例如，

            Ext.get('search-form').on('submit', function(ev) {
                ev.preventDefault();
                Ext.ux.JSONP.request('http://api.flickr.com/services/feeds/photos_public.gne', {
                    callbackKey: 'jsoncallback',
                    params: {
                        format: 'json',
                        tags: Ext.fly('search-value').dom.value,
                        tagmode: 'all',
                        lang: 'en-us'                            
                    },
                    callback: updateResults
                });
                return false;
            });

维基百科定义

jsonp

JSONP或“带填充的JSON”是对基本JSON数据格式的补充。它提供了一种从不同域中的服务器请求数据的方法，这是由于相同的原始策略而被典型Web浏览器禁止的。

根据定义相同的原始政策

在计算中，相同的源策略是许多浏览器端编程语言（如JavaScript）的重要安全概念。该策略允许在源自同一站点的页面上运行的脚本在没有特定限制的情况下访问彼此的方法和属性，但阻止访问不同站点上的页面中的大多数方法和属性。[