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

最新推荐文章于 2023-12-14 10:35:56 发布

Stamina_Boy

最新推荐文章于 2023-12-14 10:35:56 发布

阅读量361

点赞数

文章标签： ajax 跨

本文链接：https://blog.csdn.net/Stamina_Boy/article/details/81661160

版权

最近用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的依赖为：

<dependency>
    <groupId>commons-beanutils</groupId>
    <artifactId>commons-beanutils</artifactId>
    <version>1.9.3</version>
</dependency>
<dependency>
    <groupId>commons-collections</groupId>
    <artifactId>commons-collections</artifactId>
    <version>3.2.1</version>
</dependency>
<dependency>
    <groupId>commons-lang</groupId>
    <artifactId>commons-lang</artifactId>
    <version>2.6</version>
</dependency>
<dependency>
    <groupId>commons-logging</groupId>
    <artifactId>commons-logging</artifactId>
    <version>1.1.1</version>
</dependency>
<dependency>
    <groupId>net.sf.ezmorph</groupId>
    <artifactId>ezmorph</artifactId>
    <version>1.0.6</version>
</dependency>
<dependency>
    <groupId>net.sf.json-lib</groupId>
    <artifactId>json-lib</artifactId>
    <version>2.2.3</version>
    <classifier>jdk15</classifier><!-- 指定jdk版本 -->
</dependency>

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请求