欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

快速解决跨域请求问题:jsonp和CORS

程序员文章站 2024-02-25 18:59:45
网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 cors 的都是行不通的,老是缺那么一两个关键的配置。本文只想解决问题,所有的代码经过亲自实践。...

网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 cors 的都是行不通的,老是缺那么一两个关键的配置。本文只想解决问题,所有的代码经过亲自实践。

本文解决跨域中的 get、post、data、cookie 等这些问题。

本文只会说 get 请求和 post 请求,读者请把 post 请求理解成除 get 请求外的所有其他请求方式。

jsonp

jsonp是利用浏览器对script的资源引用没有同源限制,通过动态插入一个script标签,当资源加载到页面后会立即执行的原理实现跨域的。jsonp是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback或者开始就定义一个回调方法,参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

jsonp只支持get请求而不支持post等其它类型的http请求,它只支持跨域http请求这种情况,不能解决不同域的两个页面之间如何进行javascript调用的问题,jsonp的优势在于支持老式浏览器,弊端也比较明显:需要客户端和服务端定制进行开发,服务端返回的数据不能是标准的json数据,而是callback包裹的数据。

jsonp 的原理很简单,利用了【前端请求静态资源的时候不存在跨域问题】这个思路。

但是 只支持 get,只支持 get,只支持 get。

注意一点,既然这个方法叫 jsonp,后端数据一定要使用 json 数据,不能随便的搞个字符串什么的,不然你会觉得结果莫名其妙的。

前端 jquery 写法

$.ajax({
type: "get",
url: baseurl + "/jsonp/get",
datatype: "jsonp",
success: function(response) {
$("#response").val(json.stringify(response));
}
});

datatype: “jsonp”。除了这个,其他配置和普通的请求是一样的。

后端 springmvc 配置

如果你也使用 springmvc,那么配置一个 jsonp 的 advice 就可以了,这样我们写的每一个 controller 方法就完全不需要考虑客户端到底是不是 jsonp 请求了,spring 会自动做相应的处理。

@controlleradvice
public class jsonpadvice extends abstractjsonpresponsebodyadvice {
  public jsonpadvice(){
    // 这样如果请求中带 callback 参数,spring 就知道这个是 jsonp 的请求了
    super("callback");
  }
}

以上写法要求 springmvc 版本不低于 3.2,低于 3.2 的我只能说,你们该升级了。

后端非 springmvc 配置

以前刚工作的时候,struts2 还红遍天,几年的光景,springmvc 就基本统治下来了国内市场。

偷懒一下,这里贴个伪代码吧,在我们的方法返回前端之前调一下 wrap 方法:

@controlleradvice
public class jsonpadvice extends abstractjsonpresponsebodyadvice {
  public jsonpadvice(){
    // 这样如果请求中带 callback 参数,spring 就知道这个是 jsonp 的请求了
    super("callback");
  }
}

cors

cross-origin resource sharing

cors是现代浏览器支持跨域资源请求的一种方式,全称是"跨域资源共享"(cross-originresourcesharing),当使用xmlhttprequest发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:access-control-allow-origin;浏览器判断该相应头中是否包含origin的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。

cors与jsonp的使用目的相同,但是比jsonp更强大,cors支持所有的浏览器请求类型,承载的请求数据量更大,开放更简洁,服务端只需要将处理后的数据直接返回,不需要再特殊处理。

毕竟 jsonp 只支持 get 请求,肯定不能满足我们的所有的请求需要,所以才需要搬出 cors。

国内的 web 开发者还是比较苦逼的,用户死不升级浏览器,老板还死要开发者做兼容。

cors 支持以下浏览器,目前来看,浏览器的问题已经越来越不重要了,连淘宝都不支持 ie7 了~~~

chrome 3+
firefox 3.5+
opera 12+
safari 4+
internet explorer 8+
前端 jquery 写法

直接看代码吧:

$.ajax({
  type: "post",
  url: baseurl + "/jsonp/post",
  datatype: 'json',
  crossdomain: true,
  xhrfields: {
    withcredentials: true
  },
  data: {
    name: "name_from_frontend"
  },
  success: function (response) {
    console.log(response)// 返回的 json 数据
    $("#response").val(json.stringify(response));
  }
});

datatype: “json”,这里是 json,不是 jsonp,不是 jsonp,不是 jsonp。

crossdomain: true,这里代表使用跨域请求

xhrfields: {withcredentials: true},这样配置就可以把 cookie 带过去了,不然我们连 session 都没法维护,很多人都栽在这里。当然,如果你没有这个需求,也就不需要配置这个了。

后端 springmvc 配置

对于大部分的 web 项目,一般都会有 mvc 相关的配置类,此类继承自 webmvcconfigureradapter。如果你也使用 springmvc 4.2 以上的版本的话,直接像下面这样添加这个方法就可以了:

@configuration
public class webconfig extends webmvcconfigureradapter {
 
  @override
  public void addcorsmappings(corsregistry registry) {
    registry.addmapping("/**/*").allowedorigins("*");
  }
}

如果很不幸你的项目中 springmvc 版本低于 4.2,那么需要「曲线救国」一下:

public class crossdomainfilter extends onceperrequestfilter {
  @override
  protected void dofilterinternal(httpservletrequest request, httpservletresponse response, filterchain filterchain) throws servletexception, ioexception {
    response.addheader("access-control-allow-origin", "*");// 如果提示 * 不行,请往下看
    response.addheader("access-control-allow-credentials", "true");
    response.addheader("access-control-allow-methods", "get, post, put, delete");
    response.addheader("access-control-allow-headers", "content-type");
    filterchain.dofilter(request, response);
  }
}

在 web.xml 中配置下 filter:

<filter>
  <filter-name>crossdomainfilter</filter-name>
  <filter-class>com.javadoop.filters.crossdomainfilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>crossdomainfilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

有很多项目用 shiro 的,也可以通过配置 shiro 过滤器的方式,这里就不介绍了。

注意了,我说的是很笼统的配置,对于大部分项目是可以这么笼统地配置的。文中类似 “*” 这种配置读者应该都能知道怎么配。

如果读者发现浏览器提示不能用 ‘*' 符号,那读者可以在上面的 filter 中根据 request 对象拿到请求头中的 referer(request.getheader(“referer”)),然后动态地设置 “access-control-allow-origin”:

string referer = request.getheader("referer");
if (stringutils.isnotblank(referer)) {
  url url = new url(referer);
  string origin = url.getprotocol() + "://" + url.gethost();
  response.addheader("access-control-allow-origin", origin);
} else {
  response.addheader("access-control-allow-origin", "*");
}

前端非 jquery 写法

jquery 一招鲜吃遍天的日子是彻底不在了,这里就说说如果不使用 jquery 的话,怎么解决 post 跨域的问题。

来一段原生 js 介绍下:

function createcorsrequest(method, url) {
  var xhr = new xmlhttprequest();
  if ("withcredentials" in xhr) {
    // 如果有 withcredentials 这个属性,那么可以肯定是 xmlhttprequest2 对象。看第三个参数
    xhr.open(method, url, true);
  } else if (typeof xdomainrequest != "undefined") {
    // 此对象是 ie 用来跨域请求的
    xhr = new xdomainrequest();
    xhr.open(method, url);
  } else {
    // 如果是这样,很不幸,浏览器不支持 cors
    xhr = null;
  }
  return xhr;
}
 
var xhr = createcorsrequest('get', url);
if (!xhr) {
  throw new error('cors not supported');
}

其中,chrome,firefox,opera,safari 这些「程序员友好」的浏览器使用的是 xmlhttprequest2 对象。ie 使用的是 xdomainrequest。

总结

以上就是本文关于快速解决跨域请求问题:jsonp和cors的全部内容,希望对大家有所帮助。感兴趣的朋友可以继续参阅本站其他相关专题,如有不足之处,欢迎留言指出!