解決跨域请求的几种方案

向右看齐 2021-11-11 03:31 274阅读 0赞

### 解決跨域请求的几种方案 ###

*   *   *  为什么会出现跨域问题
         *  解决方法
         *   *  相关知识
             *  1.拦截器（不建议使用）
             *  2.使用jsonp
             *  3.使用springmvc4.2或以上版本
             *  4.使用springmvc4.2或以上版本的@CrossOrigin注解
             *  5.nginx反向代理

在前后端分离的项目中出现跨入问题。在此记录下解决方式：  
其实跨域问题的解决方式有多种，大致是：拦截器拦截请求、jsonp、第三方cor包、在spring MVC 4.2 中增加CORS支持非常简单，可以配置全局的规则，也可以使用@CrossOrigin注解进行细粒度的配置、nginx反向代理。

### 为什么会出现跨域问题 ###

这是一种安全策略，跨域：即只要协议名、域名、端口号中有一个不一样，就会被判定为是跨域请求。

### 解决方法 ###

#### 相关知识 ####

*  Access-Control-Allow-Origin：设置允许跨域的地址是什么，请求头中的Origin存的是调用方地址，\*表示所有。
 *  Access-Control-Allow-Headers：有时调用方发送的请求中headers里面会自定义头信息，那么被调用方也应该在响应中把headers返回回去，例如可以是这些值：Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified,Accept, Cache-Control, Expires, Content-Type, X-E4M-With,token，其中token是我自定义的。
 *  Access-Control-Allow-Methods： 允许跨域调用的方法是什么类型，可以是：GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH。
 *  Access-Control-Allow-Credentials：带有Cookie的跨域请求，如果要利用session或cookie标识身份，此值必须设置为true。
 *  Access-Control-Max-Age：非简单请求，只要第一次通过OPTIONS检查 在多久之内不会在调用OPTIONS进行检测，单位秒。

#### 1.拦截器（不建议使用） ####

创建filter类：

package cn.jiangdoc.web.filter;
    
    import java.io.IOException;
    
    import javax.servlet.Filter;
    import javax.servlet.FilterChain;
    import javax.servlet.FilterConfig;
    import javax.servlet.ServletException;
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    /** * 用拦截器拦截跨域请求 * @author jiangdoc * */
    public class SimpleCORSFilter implements Filter { 
        private boolean isCross = false;
    
        @Override
        public void destroy() { 
            isCross = false;
        }
    
        @Override
        public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
                throws IOException, ServletException { 
        	HttpServletRequest httpServletRequest = (HttpServletRequest) request;
            HttpServletResponse httpServletResponse = (HttpServletResponse) response;
            if (isCross) { 
                
                httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
                httpServletResponse.setHeader("Access-Control-Max-Age", "0");
                httpServletResponse.setHeader("Access-Control-Allow-Headers",
                        "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified,Accept, Cache-Control, Expires, Content-Type, X-E4M-With,token");
                // 是否允许浏览器携带用户身份信息（cookie）
                httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
                httpServletResponse.setHeader("XDomainRequestAllowed", "1");
                httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
                
    
            }
         // 跨域的图片上传会用到
           //OPTIONS 方法发起一个预检请求，以检测实际请求是否可以被服务器所接受。
    	if( "OPTIONS".equals(httpServletRequest.getMethod())){   
          	System.out.println("图片上传");
         	 //状态码(204)，指示请求成功，但没有要返回的新信息。
        	 httpServletResponse.setStatus(HttpServletResponse.SC_NO_CONTENT);
    	}else{ 
        	chain.doFilter(request, response);
    	}
        }
    
        @Override
        public void init(FilterConfig filterConfig) throws ServletException { 
            String isCrossStr = filterConfig.getInitParameter("IsCross");
            isCross = isCrossStr.equals("true") ? true : false;
        }
    
    }

在web.xml中配置：

<filter>  
           <filter-name>SimpleCORSFilter</filter-name>  
           <filter-class>cn.jiangdoc.web.filter.SimpleCORSFilter</filter-class>  
           <init-param>  
               <param-name>IsCross</param-name>  
               <param-value>true</param-value>  
           </init-param>  
       </filter>  
       <filter-mapping>  
           <filter-name>SimpleCORSFilter</filter-name>  
           <url-pattern>/*</url-pattern>  
       </filter-mapping>

#### 2.使用jsonp ####

前端代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nMTgyMzgwMzI4OTE_size_16_color_FFFFFF_t_70]  
后端代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nMTgyMzgwMzI4OTE_size_16_color_FFFFFF_t_70 1]  
每次都要对返回数据做处理比较繁琐。

#### 3.使用springmvc4.2或以上版本 ####

1.  xml配置方式：  
    在spring-mvc.xml中添加配置：

<mvc:cors>  
              <mvc:mapping path="/**" allowed-origins="*" allowed-methods="POST, GET, OPTIONS, DELETE, PUT" allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With" allow-credentials="true" />  
          </mvc:cors>

如果在bean解析的时候出错：Cannot locate BeanDefinitionParser for element \[cors\]cvc-complex-type.2.4.c: 通配符的匹配无法找到元素 ‘mvc:cors’ 的声明。  
1.检查springmvc的版本是不是4.2以上。  
2.检查springmvc.xml中的约束文件的版本。  
下面是我的：

1.  继承WebMvcConfigurerAdapter  
    Java代码：

@Configuration
    @EnableWebMvc
    public class WebConfig extends WebMvcConfigurerAdapter { 
    
        @Override
        public void addCorsMappings(CorsRegistry registry) { 
            registry.addMapping("/**");
        }
    }

将该类注入到容器中：

#### 4.使用springmvc4.2或以上版本的@CrossOrigin注解 ####

下面是源码：

String[] DEFAULT_ORIGINS = {  "*" };
    
    	String[] DEFAULT_ALLOWED_HEADERS = {  "*" };
    
    	boolean DEFAULT_ALLOW_CREDENTIALS = true;
    
    	long DEFAULT_MAX_AGE = 1800;

可以看到该注解支持的类型和默认值。  
使用方法只需要在controller层的类或方法上添加该注解并定义自己的想要的粒度。  
例：

@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)
    @RestController
    @RequestMapping("/account")
    public class AccountController { 
    
        @GetMapping("/{id}")
        public Account retrieve(@PathVariable Long id) { 
            // ...
        }
    
        @DeleteMapping("/{id}")
        public void remove(@PathVariable Long id) { 
            // ...
        }
    }

注解不起作用的原因：  
1、是springMVC的版本要在4.2或以上版本才支持@CrossOrigin

2、非@CrossOrigin没有解决跨域请求问题，而是不正确的请求导致无法得到预期的响应，导致浏览器端提示跨域问题。

3、在Controller注解上方添加@CrossOrigin注解后，仍然出现跨域问题，解决方案之一就是：在@RequestMapping注解中没有指定Get、Post方式，具体指定后，问题解决。  
推荐

#### 5.nginx反向代理 ####

在nginx的配置文件中：

server {  
        location / {  
            if ($request_method = 'OPTIONS') {  
              add_header 'Access-Control-Allow-Origin' '*';  
              add_header 'Access-Control-Allow-Credentials' 'true';  
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  
              add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';  
             # add_header 'Access-Control-Max-Age' 3600;  
              add_header 'Content-Type' 'text/plain charset=UTF-8';  
              add_header 'Content-Length' 0;  
              return 200;  
            }  
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nMTgyMzgwMzI4OTE_size_16_color_FFFFFF_t_70]: /images/20211109/a3b2a24e9fe64076a214a13b17dfeba9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nMTgyMzgwMzI4OTE_size_16_color_FFFFFF_t_70 1]: /images/20211109/a5ac82188e424dec9a78b36d78212ac7.png