【问题解决篇】前后端分离项目跨域问题:Access to XMLHttpRequest at ‘xx‘ from origin ‘xx‘ has been blocked by CORS policy

目录

文章目录

1. 跨域报错页面

2. 报错原因

3. 常用解决方法

3.1 方法一 使用配置类实现跨域过滤器

3.2 方法二  JSONP方式解决跨域

---

文章目录

1. 跨域报错页面

浏览器按下F12可以在控制台看见类似：

Access to XMLHttpRequest at 'http://xxxx' from origin 'http://xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2. 报错原因

原因是：

基于浏览器的同源策略，去判断是否跨域请求，同源策略是浏览器的一种安全机制，从一个地址请求另一个地址，如果协议、主机、端口三者全部一致则不属于跨域，否则有一个不一致就是跨域请求。

例如：

从http://localhost:8601  到   http://localhost:8602  由于端口不同，是跨域。

从http://192.168.101.10:8601  到   http://192.168.101.11:8601  由于主机不同，是跨域。

从http://192.168.101.10:8601  到   https://192.168.101.10:8601  由于协议不同，是跨域。

3. 常用解决方法

3.1 方法一 使用配置类实现跨域过滤器

在咱们的项目下面创建一个config包，在config包下编写GlobalCorsConfig.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 GlobalCorsConfig {

  /**
   * 允许跨域调用的过滤器
   */
  @Bean
  public CorsFilter corsFilter() {
   CorsConfiguration config = new CorsConfiguration();
   //允许白名单域名进行跨域调用
   config.addAllowedOrigin("*");
   //允许跨越发送cookie
   config.setAllowCredentials(true);
   //放行全部原始头信息
   config.addAllowedHeader("*");
   //允许所有请求方法跨域调用
   config.addAllowedMethod("*");
 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
   source.registerCorsConfiguration("/**", config);
   return new CorsFilter(source);
  }
 }

3.2 方法二  JSONP方式解决跨域

JSONP（JSON with Padding）是一种利用<script>标签不受同源策略限制的特点来实现跨域数据获取的方法。通过 script 标签的 src 属性 进行跨域请求，如果服务端要响应内容则首先读取请求参数callback的值，callback是一个回调函数的名称，服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方。