jquery之ajax跨域请求

原创 2016年08月30日 19:34:47

由于最近在调试新的应用程序,程序中涉及到http的跨域问题,ajax的示例脚本如下:

     

$.ajax({
   type: methodType,
   url: urlAddress,
   async:asyncType,
   data:postdata,
   dataType: ajaxDataType,
   xhrFields:{withCredentials: true},
       crossDomain:true,
   contentType:contType,
   beforeSend:function() {
      funObj.ajaxBefore && funObj.ajaxBefore();
   },
   success:function(data){
      funObj.ajaxSuccess(data,funObj);
   },
   complete:function(){
      funObj.ajaxComplete && funObj.ajaxComplete();
   },
   error:function(xhr, textStatus, errorThrown) {
      if(xhr.status == 403) {
         Materialize.toast("你当前的会话已失效或无权访问该地址!",MSG_TIMEOUT);
      } else {
         if(funObj.ajaxError) {
             funObj.ajaxError();
         } else {
             ajaxError();
         }
       }
      return;
   }
});

其中:
   xhrFields:{withCredentials: true} 表示将本次请求附加cookie信息;
   crossDomain:true 表示允许脚本跨域请求;
后台的服务器端的web.xml增加一个filter配置如下:
<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    <init-param>
        <param-name>cors.allowOrigin</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportedMethods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportedHeaders</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposedHeaders</param-name>
        <param-value>X-Test-1,X-Test-2</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportsCredentials</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>cors.maxAge</param-name>
        <param-value>3600</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
上面需要注意的是:filter-mapping需要是排在第一个的filter,如果不是第一个在其它filter做的一些鉴权会有问题,切记。

jQuery ajax跨域请求的解决方法

由于JS同源策略的影响,因此js只能访问同域名下的文档。因此要实现跨域,一般有以下几个方法: 一、处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Le...
  • wuyou1336
  • wuyou1336
  • 2017年02月07日 23:52
  • 2684

jQuery Ajax 跨域请求

好记忆不如按烂笔头... ... 今天接到一个项目,让通过ajax 的方式去访问南方某公司,某系统的数据,所有东东都在html上展示,没有后台的操作。 给定了个url,规定传递的参数,其他就没有其...
  • supingemail
  • supingemail
  • 2015年09月06日 15:38
  • 2023

AJAX POST&跨域 解决方案 - CORS

CORS能做什么:      正常使用AJAX会需要正常考虑跨域问题,所以伟大的程序员们又折腾出了一系列跨域问题的解决方案,如JSONP、flash、ifame、xhr2等等。      本文介...
  • z69183787
  • z69183787
  • 2016年11月09日 17:49
  • 3203

jQuery实现ajax跨域请求XML数据 并解析XML元素

名称 文件路径 文件大小 状态 操作 等待加载,请选择上传文件......
  • design321
  • design321
  • 2014年08月31日 01:50
  • 4186

利用JQuery和Servlet实现跨域提交请求

原理:JavaScript的Ajax不可以跨域,但是可以通过向本地的一个Servlet发出请求,由Servlet完成跨域。再把远程的结构返回给客户端。这样Ajax就可以跨域了。在后面,再发一个PHP版...
  • superit401
  • superit401
  • 2016年07月26日 17:53
  • 1349

用最简单的例子演示如何使用js或者$.ajax进行跨域请求

本文用一个最简单的例子演示如何使用javascript或者$.ajax进行跨域请求
  • lhtzbj12
  • lhtzbj12
  • 2016年12月29日 15:19
  • 1375

跨域解决方案之一---->JQuery.Ajax JSONP解决跨域访问

JSONP的最基本的原理是:动态添加一个标签,而script标签的src属性是没有跨域的限制的。本文后端使用servlet做测试:前端页面代码: Insert title here $(...
  • puyangmengxue
  • puyangmengxue
  • 2015年02月02日 13:33
  • 1133

跨域解决方案 & 使用angularJS和jQuery进行Ajax请求的差异

前端同学李雷和后台同学韩梅梅分别在自己电脑上进行开发,后台接口写好的时候,李雷改动完就把前端代码上传到gitlab,然后在测试机上从gitlab上拉下来,然后在测试机上移动最新代码,最后回到本机刷新页...
  • u011366705
  • u011366705
  • 2015年10月31日 15:43
  • 3408

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式,...
  • liuzp111
  • liuzp111
  • 2014年05月29日 14:06
  • 1546

ASP.Net 跨域跳转域名 使用jquery ajax请求

解释思路: (一) 假设思路:a:8884/login.html登录选择不同服务器在url带参数[wyh]跳转 到 b:8885/login.html取出url参数[wyh],判断参数[...
  • qq_29596627
  • qq_29596627
  • 2016年08月06日 15:16
  • 530
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery之ajax跨域请求
举报原因:
原因补充:

(最多只允许输入30个字)