跨域问题多种解决方案

一、概述

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求，所以就出现了一个跨域问题，特别是在前后端分离的情况下。

1. 跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。

2. 浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。

解决这类问题的办法有很多。

二、解决方案

1. 通过前端使用Jsonp来解决，解决方法参照

   https://blog.csdn.net/u014607184/article/details/52027879

2. 通过Nginx来解决

   #设置需要跨域的指定文件
   location ^~/res/ {
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Methods 'GET,POST';
       add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
       alias /data/web/res/;
   }
   

   #设置允许全局跨域
   server {
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Methods 'GET,POST';
       add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-	Since,Cache-Control,Content-Type,Authorization';  
   }
   

3. springboot的处理方法

   import org.springframework.context.annotation.Configuration; 
   import org.springframework.web.servlet.config.annotation.CorsRegistry; 
   import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; 
   
   @Configuration 
   public class CorsConfig extends WebMvcConfigurerAdapter { 
   
       @Override 
       public void addCorsMappings(CorsRegistry registry) { 
           registry.addMapping("/**") 
                   .allowedOrigins("*") 
                   .allowCredentials(true) 
                   .allowedMethods("GET", "POST", "DELETE", "PUT") 
                   .maxAge(3600); 
       } 
   }
   

4. springMvc是采用过滤器的方式，然后将写好的过滤器配置到Web.xml中。

   public class CORSFilter implements Filter {
   
       public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
           HttpServletResponse response = (HttpServletResponse) res;
           response.setHeader("Access-Control-Allow-Origin", "*");
           response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD");
           response.setHeader("Access-Control-Max-Age", "3600");
           response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");
           chain.doFilter(req, res);
       }
       
       public void init(FilterConfig filterConfig) {}
   
       public void destroy() {}
   }
   

5. 如果想要更明确的指定是哪一个请求允许跨域，则可以使用@CrossOrigin注解，将这个注解标注在相应的controller类中。

   @CrossOrigin(origins = "http://192.205.15.10:8080", maxAge = 3600)
   @RequestMapping("/hello")
   @RestController
   public class HelloController{
       
   }
   

6. 如果是调用其他系统中的请求获取JSON格式数据，则可以统一转到后台通过httpClient调用，请求提到的数据原原本来的返回。