跨域:如何解决浏览器跨域的问题(后端实现)

小半 • 2023年1月26日下午6:57 • 技术随笔 • 阅读 71

1.为什么会产生跨域问题

跨域的几种情况	例如
域名不同	`taobao.com`与`zhihu.com`
域名相同,端口不同	`taobao.com:80`与`taobao.com:8080`
二级域名不同	`a.taobao.com`与`b.taobao.com`
请求协议不同	`Https`与`Http`

当请求的域名和端口都一样,但是请求路径不同,不属于跨域问题!!!
taobao.com/items
taobao.com/goods
那你可能就有疑问,为什么我引入的一些第三方js脚本不会出现跨域问题呢?
因为:跨域问题是针对ajax的一种限制,一个页面发送ajax请求,浏览器只能在当前页面域名相同的路径,会进行解析,这样可以阻止跨站的攻击!

2.常见的跨域解决方案

常见的跨域问题解决方案有3种:

Jsonp
早期采用的方案,利用script标签可以解决跨域的实现.
Nginx反向代理
利用nginx把跨域反向代理成不跨域,支持各种请求方式,需要在nginx里面进行配置
CORS
规范的跨域请求解决方案,安全可靠,利用服务端的控制进行是否允许跨域,可以自定义规则,支持各种请求

3.使用CORS解决跨域问题

CORS是W3C标准,全称”跨域资源共享“（Cross-origin resource sharing）。
它允许浏览器发起跨域服务器的XMLHttpResquest请求,从而解决Ajax只能同源策略的限制.

浏览器会将Ajax请求分为2类服务端的处理方式也会有所不同:简单请求,特殊请求,我们只需要服务端配置特殊请求的处理方式就可以类,因为特殊请求里面包含类普通请求的处理方式
原理会比较复杂,但是写代码的话不是特别复杂,原理就是服务端需要通过拦截器进行实现,而浏览器端会自动完成实现,只需要关注服务端的编写.
我们通常在Api网关进行编写,因为网关负责请求的分发和过滤,这样每次请求都走我们创建的拦截器就不需要每次对跨域进行判定的编写了!

4.代码实现CORS

SpringMvc提供了CorsFilter,我们在网关中编写一个配置类,我们只需要创建并且注册给Sping管理就行了:

@Configuration
public class CSCorsConfiguration {
    @Bean
    public CorsFilter corsFilter(){
        //初始化cors配置
        CorsConfiguration configuration=new CorsConfiguration();
        //允许跨域的域名,如果需要携带cookie那么就不能用 * 表示 *代表所有域名都可以跨域访问
        configuration.addAllowedOrigin("http://manage.youtwo.com");
        //允许携带cookie
        configuration.setAllowCredentials(true);
        // *代表所有的请求方法 :Get Post Put Delete...
        configuration.addAllowedMethod("*");
        // * 允许携带任何头信息
        configuration.addAllowedHeader("*");

        //初始化cors配置对象
        UrlBasedCorsConfigurationSource corsConfigurationSource=new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",configuration);

        return new CorsFilter(corsConfigurationSource);
    }
}