[java]60、前后端分离

1、背景

1.1、概述

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）
核心思想是前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互。

前后端分离

前后端分离：
1、页面使用保持用静态页面即可（html）
2、静态页面（浏览器）发送异步请求（AJAX）给后台服务器，后台服务器返回JSON
3、浏览器解析JSON数据，动态生成对应的HTML标签，显示到当前用户眼前
4、前端一个项目、后端一个项目，分开开发
5、前端一个服务器、后端一个服务器，分开部署

1.2、同源策略

浏览器有个同源策略（Same-Origin Policy）
它规定了：默认情况下，AJAX请求只能发送给同源的URL
同源是指三个相同：协议、域名（IP）、端口
img、script、link、iframe、video、audio等标签不受同源策略的约束

1.3、跨域资源共享

1、解决AJAX跨域请求的常用方法
CORS（Cross-Origin Resource Sharing），跨域资源共享
2、CORS的实现需要客户端和服务器同时支持
服务器需要返回相应的响应头（比如Access-Control-Allow-Origin）

2、SpringMVC实现CORS

2.1、@CrossOrigin

在Controller上使用@CrossOrigin注解，允许当前Controller被跨域访问
例如RestController中的所有请求都可以被http://localhost:5500访问

@RestController
@RequestMapping("/users")
@CrossOrigin({"http://localhost:5500"})
public class UserController {
    @GetMapping("/list")
    public List list() {
        return "";
    }
}

2.2、在WebMvcConfigurer中配置

1、创建Bean类

@ConfigurationProperties("be")
@Component
public class BeProperties {
    public String[] getCorsOrigins() {
        return corsOrigins;
    }
    public void setCorsOrigins(String[] corsOrigins) {
        this.corsOrigins = corsOrigins;
    }
    private String[] corsOrigins;
}

2、application.yml中添加配置结果

application.yml

3、在WebMvcConfigurer的子类中实现

@Configuration
public class WebCfg implements WebMvcConfigurer {
    @Autowired
    private BeProperties beProperties;
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // ** 表示所有的路径开放全局跨域访问权限
        registry.addMapping("/**")
                // 开放哪些IP，端口，域名的访问权限
                .allowedOrigins(beProperties.getCorsOrigins())
                // 哪些HTTP方法允许跨域访问
                .allowedMethods("GET", "POST")
                // 是否允许发送Cookie信息
                .allowCredentials(true)
                // 允许HTTP请求中的携带哪些Header信息
                .allowedHeaders("*");
    }
}