跨域问题怎么解决

一、跨域问题产生原因

有时候在从地址A访问地址B被CORS policy阻止通过，原因是浏览器的同源策略阻止的，同源策略是浏览器的一种安全机制，从一个地址请求另一个地址，如果协议、主机、端口三者全部一致则不属于跨域，否则有一个不一致就是跨域请求。

地址A	地址B	跨域原因
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	协议不同

注意：服务器之间不存在跨域请求。浏览器判断是跨域请求会在请求头上添加origin，表示这个请求来源哪里。

GET / HTTP/1.1 Origin: http://localhost:8601

服务器收到请求判断这个Origin是否允许跨域，如果允许则会在响应头中添加Access-Control-Allow-Origin修饰需要跨域地址，以说明允许该来源的跨域请求，如下：

Access-Control-Allow-Origin：http://localhost:8601

如果允许任何域名来源的跨域请求，则响应如下：

Access-Control-Allow-Origin：*

---

二、常见的解决方法

1、JSONP

通过script标签的src属性进行跨域请求，如果服务端要响应内容则首先读取请求参数callback的值，callback是一个回调函数的名称，服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方。如下图：

2、添加响应头

服务端在响应头添加 Access-Control-Allow-Origin：*

（1）实现：由于Spring web依赖包已经有一个现成的过滤器组件，我们只要自己定义一个配置类（如：GlobalCorsConfig）作为过滤器并加上@Configuration注解，拿取web依赖中的跨域过滤器CorsFilter（@Bean使其生效），然后这其中实例化一个CorsConfiguration()对象并调用其中方法配置跨域信息，然后实例化一个UrlBasedCorsConfigurationSource()对象使用registerCorsConfiguration("/**", CorsConfiguration()对象)将配置信息添加到请求头，最后返回跨域过滤器CorsFilter(UrlBasedCorsConfigurationSource()对象)。（此配置类实现了跨域过虑器，在响应头添加Access-Control-Allow-Origin。重启系统管理服务，前端工程可以正常跨域）

import org.springframework.web.filter.CorsFilter;

/**
 * @description 跨域过虑器
 */
 @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、使用nginx代理跨域

 

① 浏览器先访问http://192.168.101.10:8601 nginx提供的地址，进入页面
② 由于此页面要跨域访问http://192.168.101.11:8601 ，不能直接跨域访问http://www.baidu.com:8601  ，而是访问nginx的一个同源地址，比如：http://192.168.101.11:8601/api ，通过http://192.168.101.11:8601/api 的代理去访问http://www.baidu.com:8601。

实现方法：先自行下载并安装好nginx，通过配置nginx.conf文件中监听端口（如：8601）和监听的路径（如：/api）从而实现了路由转发访问。（最后记得在命令行模式下使用：nginx.exe -s reload命令重新加载nginx的配置文件）
这样浏览器就可以通过访问nginx的IP：http://192.168.101.11:8601/api 通过识别IP后的路径（如：/api）路由转发到指定服务端http://www.baidu.com:8601进行通信。

4、使用Gateway网关

① 先导入Gateway依赖

<dependency>
   <groupId>org.springframework.cloud</groupId>
   <artifactId>spring-cloud-starter-gateway</artifactId>
   <version>3.1.9</version>
</dependency>

② 在Gateway服务配置文件中配置跨域信息