跨域请求问题

跨域请求简介

跨域请求：通过一个域的JavaScript脚本和另外一个域的内容进行交互

域的信息：协议、域名、端口号

同域：当两个域的协议、域名、端口号均相同

如下所示：

同源【域】策略：在浏览器中存在一种安全策略就是同源策略，同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

使用CORS解决跨域

官网地址：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

• CORS的全称为Cross-origin Resource Sharing，中文含义是跨域资源共享，

• CORS 是跨域的一种解决方案，CORS 给了web服务器一种权限：服务器可以选择是否允许跨域请求访问到它们的资源。

第一种方法:后端服务器开启跨域支持

在要跨域的controller请求添加注解

@CrossOrigin(allowCredentials = "true" , originPatterns = "*" , allowedHeaders = "*") 

如图

弊端：每一个controller类上都来添加这样的一个接口影响开发效率、维护性较差

第二种方法:添加一个配置类配置跨域请求

@Component
public class WebMvcConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")      // 添加路径规则
                .allowCredentials(true)               // 是否允许在跨域的情况下传递Cookie
                .allowedOriginPatterns("*")           // 允许请求来源的域规则
            	.allowedMethods("*")
                .allowedHeaders("*") ;                // 允许所有的请求头
    }
    
}