跨域的概念和解决方案

跨域（Cross-Origin）指的是浏览器从一个源（Origin）获取数据时，该源与当前页面的源不同。常见的跨域场景包括从一个域名获取数据，从一个端口获取数据，从一个子域名获取数据等。

跨域问题的存在是由于浏览器的同源策略（Same-Origin Policy）所致，该策略要求浏览器只能向同源网站发送请求，即协议、域名和端口必须完全相同。

为了解决跨域问题，常见的解决方案包括：

1.JSONP（JSON with Padding）：利用

2.CORS（Cross-Origin Resource Sharing）：是一种标准的跨域解决方案，需要目标服务器支持。目标服务器在响应中添加一些特殊的头部信息，告诉浏览器允许跨域访问，例如：Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等。

3.nginx代理服务器：通过在本地服务器上设置代理，将跨域请求发送给本地服务器，由本地服务器再去请求目标服务器，获取数据后再返回给浏览器，从而实现跨域请求（只有浏览器访问服务器的时候才可能会出现跨域问题，服务器和服务器之间访问不存在）。

4.WebSocket：WebSocket 协议并没有同源策略的限制，因此可以通过 WebSocket 进行跨域通信。

5.postMessage：利用 HTML5 中新增的 postMessage 方法，可以在不同窗口、不同域名之间传递消息，从而实现跨域通信。

第二种的实现

@Configuration
public class GlobalCorsConfig {
    
    

    @Bean
    public CorsFilter corsFilter(){
    
    
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //允许白名单域名进行跨域调用
        corsConfiguration.addAllowedOrigin("*");
        //允许跨域发送cookie
        corsConfiguration.setAllowCredentials(true);
        //方向全部原始头信息
        corsConfiguration.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        corsConfiguration.addAllowedMethod("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}

为了更安全自己可以加上具体的路径和请求

配置nginx ，/ 可以写上你跨域访问的路径

location / {
    
    
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    proxy_pass http://www.xxxx.com;
}

跨域的概念和解决方案

猜你喜欢