关于前端:Spring-boot之前后端项目的跨域问题

1.前言

当初大多数互联网的网站我的项目都用到了Spring系列的框架，而随着技术革新，摒弃了传统的JSP/Servlet我的项目，新我的项目个别都会应用到前后端拆散的准则。这样做的益处是通过将前端和后端我的项目的界线进行辨别，从而进步开发效率，也便于我的项目的测试和运维。

而在前后端拆散的我的项目中，无论是Spring boot还是Spring cloud我的项目，最常见也是最外围的问题就是跨域问题。因为前端和后端的我的项目都处在不同的服务器端口上，换句话来说就是我的项目的端口不共用，无奈间接进行数据传输。这时就必须设置我的项目的跨域问题。

2.什么是跨域？

跨域是指浏览器不能执行其余网站的脚本。 它是由浏览器的同源策略造成的，是浏览器对javascript施加的平安限度。

[1]. 什么是同源策略?

同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最外围也最根本的平安性能，如果短少了同源策略，浏览器很容易受到XSS、CSFR等攻打。所谓同源是指"协定+域名+端口"三者雷同，即使两个不同的域名指向同一个ip地址，也非同源。

同源策略限度以下几种行为：

• Cookie、LocalStorage 和 IndexDB 无奈读取
• DOM和JS对象无奈取得
• AJAX 申请不能发送

[2]. 常见的跨域场景

3.跨域形式

跨域形式次要能够分为前端配置跨域和后端配置跨域，个别只用配置一个，也就是说前端配置了跨域后端就能够不必配置跨域。

[1].前端跨域

前端跨域能够参考慕课网的一篇文章：http://www.imooc.com/article/291931，我感觉写得十分不错，把前端跨域问题总结得特地全面。

而本篇博客次要是介绍如何在后端我的项目配置跨域。

[2].后端跨域

后端跨域个别分为两种：第一种是增加@CrossOrigin注解；第二种是配置我的项目的全局跨域。

增加@CrossOrigin注解

当应用的是Spring boot 1.x版本时，能够间接在controller层上增加@CrossOrigin，便可解决跨域问题。但在Spring boot 2.x版本之后就不再反对不带配置信息的@CrossOrigin注解，当还是应用@CrossOrigin时如下：

@CrossOrigin
@RestController
public class EntryController {
@Autowired
private UserService userService;
...
}

前端控制台或报错，如下：

这时你便会配置@CrossOrigin注解如下：

@CrossOrigin(origins = "*",maxAge = 3600)
//@RestController的作用为@Controller+@ResponseBody之和
@RestController
public class EntryController {
@Autowired
private UserService userService;
...
}

配置完后肯定要重启我的项目，不然不会失效，之后个别不会报错了。

如果你按上述配置之后依然报错，别急，这时你就应该查看你在后端是否配置了过滤器和拦截器，如果配置了，那此时就不能间接用 @CrossOrigin(origins = "*",maxAge = 3600)了（这时我在开发本人的我的项目时的血的教训）。这时便要在后端配置全局的跨域规定，如下。

配置全局跨域规定

在你的com.xxx.xxx下新建config目录，新建MyCorsConfig类（名字可任意取，最好不要和java中的类库重名），代码设置如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
//加上配置注解
@Configuration
public class MyCorsConfig {
//加上@Bean放入Spring的IOC容器中
@Bean
public CorsFilter corsFilter() {
//新建跨域配置
CorsConfiguration corsConfiguration = new CorsConfiguration();
//容许所有申请源(url)
corsConfiguration.addAllowedOrigin("*");
//容许所有申请头信息
corsConfiguration.addAllowedHeader("*");
//容许所有申请url中蕴含的办法名
corsConfiguration.addAllowedMethod("*");
//容许所有申请url中蕴含用户的凭证信息
corsConfiguration.setAllowCredentials(true);
//新建基于url的配置源信息
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
//将跨域规定注册进去(相似于List中的add办法)
source.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(source);
}
}

注：配置了全局的跨域规定后就不必配置@CrossOrigin注解了。

按上述要求配置结束后重新启动我的项目，就不会报错了。

4.总结

跨域问题在开发网页利用时会常常遇到，而在解决跨域问题时应用前端解决的话可选择项过多而找不到适合的计划，这时不如和后端开发小哥交换一下，间接在后端配置跨域就行了，简略又省事（狗头爱护）。

如果你对此问题还有其余的解决形式或有疑难，欢送评论留言！