Spring boot前后端分离后，跨域问题怎么解决？

男娘i 2023-02-10 03:56 6阅读 0赞

> 现在基于spring boot前后端分离的开发模式越来越普遍，那么，由于前后端分离引发的跨域问题，你知道怎么解决吗？

### 什么是跨域 ###

**跨域**是指 不同域名之间相互访问。即浏览器控制当前网页下不能执行其他网站的脚本，这是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。  
也就是如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容  
如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。

**跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。**

**同源策略**  
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。**所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。**  
前端发起的请求只要不符合同源策略就会出现跨域问题。

**案例分析**

<table> 
 <thead> 
  <tr> 
   <th>URL</th> 
   <th>说明</th> 
   <th>是否允许通信</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>http://www.a.com/a.js http://www.a.com/b.js</td> 
   <td>同一域名下</td> 
   <td>允许</td> 
  </tr> 
  <tr> 
   <td>http://www.a.com/lab/a.js http://www.a.com/script/b.js</td> 
   <td>同一域名下不同文件夹</td> 
   <td>允许</td> 
  </tr> 
  <tr> 
   <td>http://www.a.com:8000/a.js http://www.a.com/b.js</td> 
   <td>同一域名，不同端口</td> 
   <td>不允许</td> 
  </tr> 
  <tr> 
   <td>http://www.a.com/a.js https://www.a.com/b.js</td> 
   <td>同一域名，不同协议</td> 
   <td>不允许</td> 
  </tr> 
  <tr> 
   <td>http://www.a.com/a.js http://70.32.92.74/b.js</td> 
   <td>域名和域名对应ip</td> 
   <td>不允许</td> 
  </tr> 
  <tr> 
   <td>http://www.a.com/a.js http://script.a.com/b.js</td> 
   <td>主域相同，子域不同</td> 
   <td>不允许</td> 
  </tr> 
  <tr> 
   <td>http://www.a.com/a.js ；http://a.com/b.js</td> 
   <td>同一域名，不同二级域名（同上）</td> 
   <td>不允许（cookie这种情况下也不允许访问）</td> 
  </tr> 
  <tr> 
   <td>http://www.cnblogs.com/a.js；http://www.a.com/b.js</td> 
   <td>不同域名</td> 
   <td>不允许</td> 
  </tr> 
 </tbody> 
</table>

### 为什么前后端分离后会导致跨域问题？ ###

前后端分离后，前端代码和后端代码都是独立部署的，一般前端采用Nginx作为web服务器部署，后端spring boot由于内置了tomcat，一般都是通过jar包直接启动。  
假设前后端部署在同一台服务器上，那么2者访问的端口必定不一致，不符合同源策略，所以出现跨域问题。  
如果前后端部署在不同服务器上，那么访问的ip或者域名必然不一致，也会出现跨域问题。

### 通过jsonp实现跨域 ###

jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。  
一个是描述信息的格式，一个是信息传递双方约定的方法。

jsonp的产生:

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

3.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

4.而json又是一个轻量级的数据格式,还被js原生支持

5.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，

**前端json请求示例：**

<!DOCTYPE html>
    <html>
    <head>
    <title>测试跨域访问</title>
    <meta charset="utf-8" />
    </head>
    <body>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
        	$(document).ready(function() { 
            	$.ajax({ 
            		type : "get",
            		async : true,
            		jsonp : "callbackName",// 后端接口参数名
            		jsonpCallback : "callbackFunction", // 回调函数名
            		url : "http://A/hello/map/getUser.json",
            		dataType : "jsonp", // 数据格式为 jsonp
            		success : function(data) { 
            			console.log("success");
            		}
            	});
        	});
        </script>
        <script type="text/javascript">
        	var callbackFunction = function(data) { 
        		alert('接口返回的数据是：' + JSON.stringify(data));
        	};
        </script>
    </body>
    </html>

**后端jsonp代码参考：**

/** * * The class JsonBackController. * * Description:该控制器返回一串简单的json数据,json数据由一个简单的User对象组成 * * @author: huangjiawei * @since: 2018年6月12日 * @version: $Revision$ $Date$ $LastChangedBy$ * */
    @RestController
    @RequestMapping(value = "/map")
    public class JsonBackController { 
        private static final Logger logger = LoggerFactory.getLogger(JsonBackController.class);
        /** * 解决跨域请求数据 * @param response * @param callbackName 前端回调函数名 * @return */
        @RequestMapping(value = "getUser.json")
        public void getUser(HttpServletResponse response, @RequestParam String callbackName) { 
            User user = new User("huangjiawei", 22);
            response.setContentType("text/javascript");
            Writer writer = null;
            try { 
            	writer = response.getWriter();
            	writer.write(callbackName + "(");
            	writer.write(user.toString());
            	writer.write(");");
            } catch (IOException e) { 
            	logger.error("jsonp响应写入失败！ 数据：" + user.toString(), e);
            } finally { 
            	if (writer != null) { 
            		try { 
            			writer.close();
            		} catch (IOException e) { 
            			logger.error("输出流关闭异常！", e);
            		}
            		writer = null;
            	}
            }
        }
    }

由于JSONP的原理其实就是欺骗浏览器，以方式调用接口，解析数据。所以，jsonp的请求方式只能是get方式，如果接口只接受post请求方式，则再做考虑。  
这种方式代码侵入强，请求方式也有限制，现在基本不再使用。

**Spring Boot对JSONP的支持**  
4.1版本以后的SpringMVC中，为我们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持jsonp的数据（SpringBoot接收解析web请求是依赖于SpringMVC实现的）  
使用AbstractJsonpResponseBodyAdvice来支持跨域请求很简单，只需要继承这个类就可以了。具体代码如下：

全局jsonp请求配置：

package com.laowan.jsonp.config;
     
    import org.springframework.web.bind.annotation.ControllerAdvice;
    import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;
     
    /** * Created by wb-zhangkenan on 2016/12/1. */
    @ControllerAdvice(basePackages = "com.laowan.jsonp.controller")
    public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{ 
        public JsonpAdvice() { 
            super("callback","jsonp");
        }
    }

测试接口：

package com.laowan.jsonp.controller;
     
    import com.laowan.jsonp.domain.PersonDomain;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.http.MediaType;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
     
    /** * Created by wb-zhangkenan on 2016/12/1. */
    @RestController
    @RequestMapping("/jsonp")
    public class JsonpTestController { 
        @Autowired
        private PersonDomain personDomain;
     
        @RequestMapping(value = "/testJsonp",produces = MediaType.APPLICATION_JSON_VALUE)
        public PersonDomain testJsonp(){ 
            return personDomain;
        }
    }

当发送的请求为：http://localhost:8003/jsonp/testJsonp?callback=callback的时候，返回的数据就是jsonp的；  
当我们请求参数中不带callback的时候：http://localhost:8003/jsonp/testJsonp，返回的数据是json的。

### 利用Nginx解决跨域 ###

通过反向代理服务器监听同端口，同域名的访问，不同路径映射到不同的地址，比如，在nginx服务器中，监听同一个域名和端口，不同路径转发到客户端和服务器，把不同端口和域名的限制通过反向代理，来解决跨域的问题。

通过Nginx反向代理，将跨域请求转变为非跨域请求，不同请求路径代理到不同的地址：

server { 
            listen       80;
            server_name  abc.com;
            #charset koi8-r;
            #access_log  logs/host.access.log  main;
    
            location /client {  #访问客户端路径
                proxy_pass http://localhost:81;
                proxy_redirect default;
            }
            location /apis {  #访问服务器路径
                rewrite  ^/apis/(.*)$ /$1 break;
                proxy_pass   http://localhost:82;
           }
    }

通过Nginx在请求头中添加CORS参数解决跨域

location / { 
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Headers X-Requested-With;
       add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
    
       if ($request_method = 'OPTIONS') { 
         return 204;
       }
    }

### 利用CORS解决跨域问题 ###

CORS是一个W3C标准，全称是"**跨域资源共享**"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。  
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，**IE浏览器不能低于IE10**。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORS与JSONP的使用目的相同，但是比JSONP更强大。  
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

CORS核心参数介绍。

Access-Control-Allow-Methods: GET, POST, PUT
    Access-Control-Allow-Headers: X-Custom-Header
    Access-Control-Allow-Credentials: true
    Access-Control-Max-Age: 1728000

（1）Access-Control-Allow-Methods  
该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

（2）Access-Control-Allow-Headers  
如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

（3）Access-Control-Allow-Credentials  
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

（4）Access-Control-Max-Age  
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

更多原理可以参看： 阮一峰 写的跨域资源共享 CORS 详解  
http://www.ruanyifeng.com/blog/2016/04/cors.html

**spring boot中使用CORS**

方式一：在需要指出跨域的Controller类或方法上添加@CrossOrigin注解

@CrossOrigin // 注解方式 
    @RestController  
    public class HandlerScanController {   
        @CrossOrigin(allowCredentials="true", allowedHeaders="*", methods={ RequestMethod.GET,  
                RequestMethod.POST, RequestMethod.DELETE, RequestMethod.OPTIONS,  
                RequestMethod.HEAD, RequestMethod.PUT, RequestMethod.PATCH}, origins="*")  
        @PostMapping("/confirm")  
        public Response handler(@RequestBody Request json){   
            return null;  
        }  
    }

方式二：配置CorsFilter，可以全局生效 **（推荐）**

/** * 实现基本的跨域请求 * @author linhongcun */
    @Configuration
    public class CorsConfig { 
        private CorsConfiguration buildConfig() { 
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
            corsConfiguration.addAllowedHeader("*"); // 允许任何头
            corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等）
            return corsConfiguration;
        }
    
        @Bean
        public CorsFilter corsFilter() { 
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", buildConfig()); // 对接口配置跨域设置
            return new CorsFilter(source);
        }
    }

当然，如果微服务多的话，需要在每个服务的主类上都加上这么段代码，这违反了DRY原则，更好的做法是在zuul的网关层解决跨域问题，一劳永逸。

方式三：通过自定义WebMvcConfigurer重写addCorsMappings(CorsRegistry)实现全局跨域控制  
这也是官网推荐的写法

@Configuration  
        public class MyConfiguration {   
            @Bean  
            public WebMvcConfigurer corsConfigurer() {   
                return new WebMvcConfigurerAdapter() {   
                    @Override  
                    public void addCorsMappings(CorsRegistry registry) {   
                        registry.addMapping("/**");
                    }  
                };  
            }  
        }

### 总结 ###

1、什么是跨域？为什么会产生跨域问题？  
2、为什么前后端分离后容易产生跨域问题？  
3、解决跨域有哪些方式？

> 参考：  
> https://blog.csdn.net/zknxx/article/details/53443181  
> https://blog.csdn.net/qq\_43486273/article/details/83272500  
> http://www.ruanyifeng.com/blog/2016/04/cors.html

觉得有用，记得点赞加关注。  
![跟着老万学java][java]

[java]: https://imgconvert.csdnimg.cn/aHR0cDovL3E4NDg3Nm42Ni5ia3QuY2xvdWRkbi5jb20vRmdqektBZzk2a3pMeXM4SXJlVm5KaXQxT19jNw?x-oss-process=image/format,png#pic_center#pic_center#pic_center