前后端分离项目跨域问题的解决

一、为什么会跨域 说到跨域不得不谈的就是浏览器的同源策略，跨域也是因为浏览器这个机制引起的,这个机制的存在还是在于安全。

1. 什么是源 Web内容的源由用于访问它的URL 的方案（协议），主机（域名）和端口定义。只有当方案，主机和端口都匹配时，两个对象具有相同的起源。

同源例子

 http://example.com/app1/index.html http://example.com/app2/index.html     相同的 scheme http 和 host

http://Example.com:80 http://example.com http     默认80端口所以同源

不同源例子

http://example.com/app1 https://example.com/app2 不同的协议

http://example.com http://myapp.example.com 不同的host

http://exa

mple.com http://example.com:8080 不同的端口

常规前端请求跨域 在没有前后端分离的时候,跨域问题往往是很少的。因为前后端都部署到一起。现在前后端分离不管vue /react面临跨域请求的问题。

网关设置跨域配置
public class CorsConfig {
    @Bean
    public CorsWebFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        CorsConfiguration config = new CorsConfiguration();
        // 允许cookies跨域
        config.setAllowCredentials(true);
        // #允许向该服务器提交请求的URI，*表示全部允许，在SpringMVC中，如果设成*，会自动转成当前请求头中的Origin
        config.addAllowedOrigin("*");
        // #允许访问的头信息,*表示全部
        config.addAllowedHeader("*");
        // 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了
        config.setMaxAge(18000L);
        // 允许提交请求的方法，*表示全部允许
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}