什么是跨域为什么非得跨域spring使用jsonp解决跨域使用CORS(跨域资源共享)解决跨域问题什么是跨域

一句话：同一个ip、同一个网络协议、同一个端口，三者都满足就是同一个域，否则就是跨域。

为什么非得跨域

基于两个方面：

a. web应用本身是部署在不同的服务器上

b.基于开发的角度 --- 前后端分离

web应用本身是部署在不同的服务器上，对应的域名也就有所不同

比如百度。

主域名：

二级域名：， ，

需要在不同的域之间，通过ajax方式互相请求，是非常常见的需求。

spring使用jsonp解决跨域

Spring 4中增加了对jsonp的原生支持，只需要ControllerAdvice就可以开启，方法如下：

首先新建一个Advice类，我们叫做“JsonpAdvice”，然后在里面定义接收jsonp请求的参数key：

package cn.isuyang.web.sso.advice;import org.springframework.web.bind.annotation.ControllerAdvice;import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;/*** 使用jsonp实现跨域的支持* @author WangSen(wangsenhehe@126.com)* @Date 2018年1月8日*/@ControllerAdvice("cn.isy.web.sso.web")public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice { public JsonpAdvice() { super("callback"); }}

@ControllerAdvice("cn.isy.web.sso.web")指定作用的包名

supper("callback")指定的是url中callback：

注意：

我们还可以重写AbstractJsonpResponseBodyAdvice中的feforeBodyWriteInternal方法：

做到实现url携带callback就返回jsonp格式，没有就返回正常格式

img

controller中

controller中的代码正常编写就OK，不用修改任何东西。

只要保证在cn.isy.web.sso.web包下即可！

jquery ajax

注意：必须使用jsonp的方式提交请求！

$.ajax({ type : "get", async:false, dataType:'jsonp', url: '', data: $("#loginForm").serialize(), crossDomain: true, jsonpCallback:"successCallback", xhrFields: { withCredentials: true }, success : function(data){ }, error:function(data){ console.log("登录出错"); $.we.utils.gotoUrl("/"); } });

有关cors的介绍可以去详细看一下，这里就不作重复了：

CORS详解

跨资源共享CORS详解

主要配置

Access-Control-Allow-Origin:  // 设置允许请求的域名，多个域名以逗号分隔Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS // 设置允许请求的方法，多个方法以逗号分隔Access-Control-Allow-Headers: Authorization // 设置允许请求自定义的请求头字段，多个字段以逗号分隔Access-Control-Allow-Credentials: true // 设置是否允许发送 Cookies

使用注解CrossOrigin

在controller类上添加CrossOrigin注解表示当前类中的所有入口函数都

可以实现跨域。也可以指定某个conroller中具体的方法。

img

了解一下这个注解的内容：

img

jquery ajax的写法

注意：这里不用使用jsonp的方式请求普通的ajax即可！，因为浏览器自己可以去做!

 $.ajax({ type : "get", url: '', data: $("#loginForm").serialize(), xhrFields: { withCredentials: true //注意这里必须指定否则cookie无法传递过去 }, success : function(data){ }, error:function(data){ console.log("登录出错"); $.we.utils.gotoUrl("/"); } });

CORS全局配置

自己试了试没有成功！

资料

解释cors的原理不错

让自己变得更优秀才可以有更多资源

来源：

搜索微信号（ID：芋道源码），可以获得各种 Java 源码解析。

并且，回复【书籍】后，可以领取笔者推荐的各种 Java 从入门到架构的书籍。

来吧，骚年~