浏览器跨域限制的N种解决方式

Posted 2023-05-07

参考技术A 1. 修改chrome安全策略，带参启动

2. 使用xSwitch 浏览器插件篡改部分请求

3. 使用本地代理转发 webpack dev server或者ngnix

4. 一级域名相同可以设置document.domain为一级域名

5. 接口允许跨域调用

123适用于开发调试 45一般用于生产

跨域问题解决方案

一、问题描述

  1、浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是与当前页域名相同的路径，这能有效的阻止跨站攻击。

 

二、解决方法 

• Jsonp：最早的解决方案，利用script标签可以跨域的原理实现

  限制：需要服务的支持，只能发起GET请求

• nginx反向代理

  思路是：利用nginx把跨域反向代理为不跨域，支持各种请求方式

  缺点：需要在nginx进行额外配置，语义不清晰

• CORS

  规范化的跨域请求解决方案，安全可靠。

  优势：在服务端进行控制是否允许跨域，可自定义规则，支持各种请求方式

  缺点：会产生额外的请求

• 源码：

• import org.springframework.context.annotation.Bean;
  import org.springframework.context.annotation.Configuration;
  import org.springframework.web.cors.CorsConfiguration;
  import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  import org.springframework.web.filter.CorsFilter;
  
  @Configuration
  public class GlobalCorsConfig {
      @Bean
      public CorsFilter corsFilter() {
          //1.添加CORS配置信息
          CorsConfiguration config = new CorsConfiguration();
          //1) 允许的域,不要写*，否则cookie就无法使用了
          config.addAllowedOrigin("http://manage.leyou.com");
          //2) 是否发送Cookie信息
          config.setAllowCredentials(true);
          //3) 允许的请求方式
          config.addAllowedMethod("OPTIONS");
          config.addAllowedMethod("HEAD");
          config.addAllowedMethod("GET");
          config.addAllowedMethod("PUT");
          config.addAllowedMethod("POST");
          config.addAllowedMethod("DELETE");
          config.addAllowedMethod("PATCH");
          // 4）允许的头信息
          config.addAllowedHeader("*");
  
          //2.添加映射路径，我们拦截一切请求
          UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
          configSource.registerCorsConfiguration("/**", config);
  
          //3.返回新的CorsFilter.
          return new CorsFilter(configSource);
      }
  }