一、什么是跨域
同一个ip、同一个网络协议、同一个端口,三者都满足就是同一个域,否则就是跨域。
二、为什么会跨域
基于两个方面:
a. web应用本身是部署在不同的服务器上,b.基于开发的角度 --- 前后端分离,web应用本身是部署在不同的服务器上,对应的域名也就有所不同比如百度。主域名:https://www.baidu.com/,二级域名:http://image.baidu.com/, http://music.baidu.com/,http://wenku.baidu.com/。需要在不同的域之间,通过ajax方式互相请求,是非常常见的需求。
三、spring使用jsonp解决跨域方案一(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:
http://sso.isy.cn/logout?callback=successCallback
注意:
我们还可以重写AbstractJsonpResponseBodyAdvice中的feforeBodyWriteInternal方法:
做到实现url携带callback就返回jsonp格式,没有就返回正常格式.
controller中
controller中的代码正常编写就OK,不用修改任何东西。
只要保证在cn.isy.web.sso.web包下即可!
jquery ajax
注意:必须使用jsonp的方式提交请求!
四、spring使用jsonp解决跨域方案二-使用CORS(跨域资源共享)解决跨域问题
在出现CORS标准之前, 我们还只能通过jsonp(jsonp跨域请求详解)的形式去向“跨源”服务器去发送 XMLHttpRequest 请求,这种方式吃力不讨好,在请求方与接收方都需要做处理,而且请求的方式仅仅局限于GET。所以 ,CORS标准必然是大势所趋,并且市场上绝大多数浏览器都已经支持CORS。(IE10以上)
CORS概念:支持CORS请求的浏览器一旦发现ajax请求跨域,会对请求做一些特殊处理,对于已经实现CORS接口的服务端,接受请求,并做出回应。有一种情况比较特殊,如果我们发送的跨域请求为“非简单请求”,浏览器会在发出此请求之前首先发送一个请求类型为OPTIONS的“预检请求”,验证请求源是否为服务端允许源,这些对于开发这来说是感觉不到的,由浏览器代理。总而言之,客户端不需要对跨域请求做任何特殊处理。
简单请求与非简单请求
浏览器对跨域请求区分为“简单请求”与“非简单请求”
“简单请求”满足以下特征:
(1) 请求方法是以下三种方法之一:
HEAD
GET
POST
(2)HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:
application/x-www-form-urlencoded、 multipart/form-data、text/plain
不满足这些特征的请求称为“非简单请求”,例如:content-type=applicaiton/json , method = PUT/DELETE...
简单请求
浏览器判断跨域为简单请求时候,会在Request Header中添加 Origin (协议 + 域名 + 端口)字段 , 它表示我们的请求源,CORS服务端会将该字段作为跨源标志。
CORS接收到此次请求后 , 首先会判断Origin是否在允许源(由服务端决定)范围之内,如果验证通过,服务端会在Response Header 添加 Access-Control-Allow-Origin、Access-Control-Allow-Credentials等字段。
浏览器收到Respnose后会判断自己的源是否存在 Access-Control-Allow-Origin允许源中,如果不存在,会抛出“同源检测异常”。
总结:简单请求只需要CORS服务端在接受到携带Origin字段的跨域请求后,在response header中添加Access-Control-Allow-Origin等字段给浏览器做同源判断。
主要配置
Access-Control-Allow-Origin: http://www.YOURDOMAIN.com // 设置允许请求的域名,多个域名以逗号分隔
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS // 设置允许请求的方法,多个方法以逗号分隔
Access-Control-Allow-Headers: Authorization // 设置允许请求自定义的请求头字段,多个字段以逗号分隔
Access-Control-Allow-Credentials: true // 设置是否允许发送 Cookies
使用注解CrossOrigin
在controller类上添加CrossOrigin注解表示当前类中的所有入口函数都可以实现跨域。也可以指定某个conroller中具体的方法。
jquery ajax的写法
注意:这里不用使用jsonp的方式请求普通的ajax即可!,因为浏览器自己可以去做!