[JavaScript知识库]No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

前后端分离时，使用html发送ajax请求从后端获取数据时

出现的BUG

Access to XMLHttpRequest at 'http://localhost:8888/employees/list' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
?
GET http://localhost:8888/employees/list net::ERR_FAILED

其中访问的过程是：

浏览器先访问前端服务器，前端服务器（假设端口号为8080）返回页面

浏览器再访问页面的时候发现页面中的 ajax 请求，再去访问接口服务器（假设端口号为8888），此时是跨域请求，浏览器在接收响应时发现接口服务器返回的没有Access-Control-Allow-Origin这个头，就认为接口服务器不允许访问，因此报这个错误。

跨域访问：服务器A 与 服务区B 相互访问，如果使用协议，ip，端口之中有一个不同时，称之为跨域访问。

其中XMLHttpRequest是ajax的底层实现

这个错误意思是服务器没有响应Access-Control-Allow-Origin这个头回来，也就是服务器不允许访问。

解决思路：

只需要告诉浏览器，当前服务器允许其他服务器进行跨域访问

只需要在springboot的启动类上，让它实现

implements WebMvcConfigurer

然后再加一个 bean

    @Bean
 ? ?public WebMvcConfigurer corsConfigurer() {
 ? ? ? ?return new WebMvcConfigurer() {
 ? ? ? ? ? ?@Override
 ? ? ? ? ? ?//重写父类提供的跨域请求处理的接口
 ? ? ? ? ? ?public void addCorsMappings(CorsRegistry registry) {
 ? ? ? ? ? ? ? ?//添加映射路径
 ? ? ? ? ? ? ? ?registry.addMapping("/**")
 ? ? ? ? ? ? ? ? ? ? ? ?//放行哪些原始域
 ? ? ? ? ? ? ? ? ? ? ?  .allowedOriginPatterns("*")
 ? ? ? ? ? ? ? ? ? ? ? ?//是否发送Cookie信息
 ? ? ? ? ? ? ? ? ? ? ?  .allowCredentials(true)
 ? ? ? ? ? ? ? ? ? ? ? ?//放行哪些原始域(请求方式)
 ? ? ? ? ? ? ? ? ? ? ?  .allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS")
 ? ? ? ? ? ? ? ? ? ? ? ?//放行哪些原始域(头部信息)
 ? ? ? ? ? ? ? ? ? ? ?  .allowedHeaders("*")
 ? ? ? ? ? ? ? ? ? ? ? ?//暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
 ? ? ? ? ? ? ? ? ? ? ?  .exposedHeaders("Header1", "Header2");
 ? ? ? ? ?  }
 ? ? ?  };
 ?  }