跨域问题 什么时候出现跨域问题 如何解决跨域问题

跨域问题是什么:
指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.

什么时候不会触发CORS跨域请求:
“简单请求"不会触发CORS预检请求. 简单请求包括"GET” “HEAD” “POST”
并且还要满足 Content-Type 的值仅限于三种情况:
text/plain , multipart/form-data , application/x-www-form-urlencoded

非简单请求会先发送预检请求 是OPTIONS方法的请求
例如PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH

同源策略: 是指 协议,域名,端口都要相同,其中有一个不同都会产生跨域问题.

如何解决跨域?

方法一:
使用nginx部署为同一域
例如
静态请求: 访问http://nginx/xxx 去前端
动态请求: 访问http://nginx/api/xxx 去网关

方法二:
配置服务器响应跨域请求
需要添加响应头
- Access-Control-Allow-Origin: 支持哪些来源的请求跨域
- Access-Control-Allow-Methods: 支持哪些方法跨域
- Access-Control-Allow-Credentials: 跨域请求默认不包含cookie, 设置为true可以包含cookie
- Access-Control-Expose-Headers: 跨域请求暴露的字段
- Access-Control-Max-age: 响应有效时间多少秒
不能每个方法都添加响应头, 所以用filter 在网关服务中统一配置跨域
以下配置就是全放行, 都可以跨域.

@Configuration
public class MyCorsConfiguration {

    @Bean
    public CorsWebFilter corsWebFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();

        //1. 配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOriginPattern("*");
        corsConfiguration.setAllowCredentials(true);

        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsWebFilter(source);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意引包的时候引入reactive包下的:
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;