解决前后端分离的跨域问题

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25天，点击查看活动详情

什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前Url	被请求页面的Url	是否跨域	原因
www.freshman.work	www.freshman.work/index.html	F	同源（协议、端口号、域名相同）
www.freshman.work	www.freshman.work/index.html	T	协议不同，Http与Https
www.freshman.com	www.baidu.com	T	主域名不同（freshman与baidu）
www.freshman.com	work.freshman.com	T	子域名不同（www与work）
www.freshman.work:8080	www.freshman.work:9999	T	都口号不一样（9999与8080）

以上几种情况均为跨域

跨域问题来源

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

解决办法

@CrossOrigin注解

只需要在SpringBoot项目加一个@CrossOrigin注解，即可解决

//此注解用于解决跨域问题
@CrossOrigin 
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserServiceMP userServiceMP;
    .......
    
}

在Springboot项目里加上这个注解@CrossOrigin ，重启之后即可实现跨域访问，前端无需再配置跨域。

配置文件CorsConfig.java

mport 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 CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

在Springboot项目里加上这个配置文件CorsConfig.java ，重启之后即可实现跨域访问，前端无需再配置跨域。