Spring MVC 的跨域解决方案

Dear 丶 2022-03-22 12:08 530阅读 0赞

**一、什么是跨域**

同一个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格式，没有就返回正常格式.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70][]

## **controller中** ##

controller中的代码正常编写就OK，不用修改任何东西。  
只要保证在cn.isy.web.sso.web包下即可！

## **jquery ajax** ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70 1][]

**四、spring使用jsonp解决跨域方案二-使用CORS(跨域资源共享)解决跨域问题**

在出现CORS标准之前， 我们还只能通过[jsonp（jsonp跨域请求详解）][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服务端会将该字段作为跨源标志。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70 2][]

CORS接收到此次请求后 ， 首先会判断**Origin**是否在**允许源**（由服务端决定）范围之内，如果验证通过，服务端会在Response Header 添加 Access-Control-Allow-Origin、Access-Control-Allow-Credentials等字段。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70 3][]

浏览器收到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中具体的方法。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70 4][]

## **jquery ajax的写法** ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70]: /images/20220322/8ff47d71f5c24a9a9baf90c898906123.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70 1]: /images/20220322/ad07e859947247b2bc681992c10a3591.png
[jsonp_jsonp]: https://zhuanlan.zhihu.com/p/24390509
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70 2]: /images/20220322/4d1e3d74572b49d2b7676b51c167231b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70 3]: /images/20220322/565f9012b26a4769a167c457b23acde6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70 4]: /images/20220322/6b0f2d6a095a4912a4f2555a7a52de54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pva2VNcWM_size_16_color_FFFFFF_t_70 5]: /images/20220322/23b6c4e349d84275b0bdd45678d64793.png