ajax跨域问题及其解决方案(java)

最近用ajax访问外部资源时发现，ajax一直返回的状态为0，查阅资料发现是因为外部链接错误或者无法访问。

解决方法如下：

1.采用jsonp (只支持get请求，即使将 type 的值修改为 POST ，也会被当成 GET 请求）

ajax代码如下：

    $.ajax({
    type:"POST",
    url:"http://localhost:8081/dianzhan?id="+10001,
    dataType:"jsonp",
    jsonp:'callback',
    jsonpCallback:"abc",
    success:function(data){
        if(data.status===0){
            alert(data.errorInfor);
        }
        else{
            $("#aaa").html(data.dianZhanToal);
        }
        },
    error:function(XMLHttpRequest){
        alert("系统错误");
        alert(XMLHttpRequest.status);
    }
    });

jsonp: 回掉函数名的参数名，默认callback，服务端通过它来获取到回掉函数名

 jsonpCallback: 回掉函数名，默认jquery自动生成

指定jsonpCallback时可以将回掉函数写在ajax外面做其他操作，不指定时不能这样做，只能在success里做操作

其中jsonpCallback的值可以随便取，只要后台返回的值与之对应即可

比如jsonpCallback:"abc",后台返回的值即为json字符串"abc("+json数据+")"

后台代码就是将对象先转化成json数据然后在与"abc("+json数据+")"拼接

其中关键代码为：

JSONObject object = JSONObject.fromObject(需要转换为json数据的对象);
return "abc("+object+")";

其中JSONObject的依赖为：

    commons-beanutils
    commons-beanutils
    1.9.3


    commons-collections
    commons-collections
    3.2.1


    commons-lang
    commons-lang
    2.6


    commons-logging
    commons-logging
    1.1.1


    net.sf.ezmorph
    ezmorph
    1.0.6


    net.sf.json-lib
    json-lib
    2.2.3
    jdk15

 

2.CROS方式，采用原始ajax (后端需要拦截请求 设置指定路由放行)

ajax代码就是常规写法，如下：

$.ajax({
    type:"POST",
    url:"http://localhost:8081/dianzhan",
    data:{
        "id":10015,
        "bookId":10015
    },
    dataType:"json",
    success:function(data){
        if(data.status===0){
            alert(data.errorInfor);
        }
        else{
            $("#aaa").html(data.dianZhanToal);
        }
        },
    error:function(XMLHttpRequest){
        alert("系统错误");
        alert(XMLHttpRequest.status);
    } 
    });
    

后台代码只需要拦截请求 设置指定路由放行即可

即在后台代码中添加两行代码：

// 一般在请求拦截器中设置
//Access-Control-Allow-Origin 头的值为 * 表示服务器接受所有的不用源的请求,也可以是特定的域 例如：http://aaa.com:8976(如果不是80端口，一定要将端口号写上)，注意 http 只能有一个 Access-Control-Allow-Origin头，头的值 只能是 * 或者 一个域（例如：http://aaa.com:8976 ）
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods","GET,POST");        //请求放行，设置其为GET或者POST访问

现在就可以直接用ajax访问资源了，但是一般推荐用第二种方法，这种方法无需改动json数据，支持GET，POST请求