cross前后端项目跨域问题

朱雀 2022-05-27 06:49 270阅读 0赞

在做前后端分离项目中，遇到了跨域问题。网上的方法虽然很多，但都很片面，关键信息没有说明，导致踩了一些坑。现在把前后端项目中关于解决跨域问题的说明和相关代码都贴出来供大家参考使用。

由于jsonp方法使用域太窄，有且只能支持GET访问，这对正常的项目来说是远远不够的，遂这种方法的使用不在介绍当中，如想使用这种方法可以网上搜索相关使用说明。

**一. 前端项目:**

1 jquery ajax:

$.ajax({
    				 type : "get",
    				 url : url,
    				 crossDomain : true, // 跨域
    //				 contentType: "application/json;charset=utf-8",
    				 dataType:"json",
    				 xhrFields: { //访问凭证
    				 withCredentials: true
    				 },
    				 success : function (msg) {					
    				 },
    				 error:function(){
    					 alert("An error has occurred!");
    				 }
    			 });

2 bootstrap table (局部)

//         url : url,
    //         ajaxOptions: {
    //                xhrFields: {//访问凭证
    //                    withCredentials: true
    //                },// 跨域
    //                crossDomain: true
    //        },
    //        method: 'GET',

**二 . 后端项目**

1  过滤器

package com.rz.commons.cross;
    
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.Arrays;
    import java.util.List;
    
    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;
    
    import org.springframework.stereotype.Component;
    
    /**
     * 跨域访问
     */
    @Component
    public class CrossFilter implements Filter {
    	
    	private List<String> arrowOrigin=new ArrayList<>();
    	
    	@Override
    	public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
    			throws IOException, ServletException {
    	    	
    	        HttpServletRequest request = (HttpServletRequest) req;
    	        HttpServletResponse response = (HttpServletResponse) res;
    	        
    	        String origin = request.getHeader("Origin");
    //	        System.out.println("origin:"+origin);
    	        response.setHeader("Access-Control-Allow-Origin",arrowOrigin.contains(origin)?origin:"");
    	        response.setHeader("Access-Control-Allow-Methods", "*");//GET, POST, OPTIONS ...
    	      //缓存预检测结果，在设定时间内，第一次发送请求的时候预检测，后面的直接发送请求
    	        response.setHeader("Access-Control-Max-Age", "1728000");
    	        response.setHeader("Access-Control-Allow-Credentials", "true");
    	        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept , X-CSRF-TOKEN");
    	        chain.doFilter(req, res);
    	}
    	
    	@Override
    	public void init(FilterConfig filterConfig) throws ServletException {
    		// TODO Auto-generated method stub
    		String[] url=filterConfig.getInitParameter("arrowOriginUrl").split(",");
    		arrowOrigin.addAll(Arrays.asList(url));
    	}
    	@Override
    	public void destroy() {
    		// TODO Auto-generated method stub
    		arrowOrigin.clear();
    	}
    }

2  web.xml

<filter>
           <filter-name>cross</filter-name>
           <filter-class>com.hf.commons.cross.CrossFilter</filter-class>
           <init-param>
                <param-name>arrowOriginUrl</param-name>
                <param-value>http://localhost:8088</param-value>
           </init-param>
      </filter>
      <filter-mapping>
          <filter-name>cross</filter-name>
          <url-pattern>/*</url-pattern>
      </filter-mapping>

注意事项:  
  
1   header in the response must not be the wildcard '\*' when the request's credentials mode is 'include'

当请求的凭证模式为'include'时，响应中的头部不能是通配符'\*'

也许你已经配置了跨域通配符\*,允许所有域名跨域，虽这种方式是十分不安全的，会导致一些攻击，但你配置的原因肯定首先是希望它能正常工作的，但出现了上述提示。上述提示的原因是由于ajax请求的时候配置了它是需要凭证访问的，因此你不能再用通配符形式了，要改为具体的域名。  
  
  
2  如果我ajax不加这个配置呢，是不是意味着可以在后台配置通配符了呢，答案是可以，但你会遇到session的问题，每次请求的cookie将无法传给后台，导致我们无法session存储一些信息，如登录信息。

xhrFields: {
    	 withCredentials: true
     },

参考:

[https://spring.io/blog/2015/06/08/cors-support-in-spring-framework][https_spring.io_blog_2015_06_08_cors-support-in-spring-framework]  
[https://stackoverflow.com/questions/43114750/header-in-the-response-must-not-be-the-wildcard-when-the-requests-credentia][https_stackoverflow.com_questions_43114750_header-in-the-response-must-not-be-the-wildcard-when-the-requests-credentia]  
[https://blog.csdn.net/taking\_wang/article/details/77476864][https_blog.csdn.net_taking_wang_article_details_77476864]

[https://www.cnblogs.com/ph121/p/6839424.html][https_www.cnblogs.com_ph121_p_6839424.html]

[https://blog.csdn.net/qq\_37625033/article/details/57072944][https_blog.csdn.net_qq_37625033_article_details_57072944]

[http://www.it1352.com/634166.html][http_www.it1352.com_634166.html]

[https_spring.io_blog_2015_06_08_cors-support-in-spring-framework]: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework
[https_stackoverflow.com_questions_43114750_header-in-the-response-must-not-be-the-wildcard-when-the-requests-credentia]: https://stackoverflow.com/questions/43114750/header-in-the-response-must-not-be-the-wildcard-when-the-requests-credentia
[https_blog.csdn.net_taking_wang_article_details_77476864]: https://blog.csdn.net/taking_wang/article/details/77476864
[https_www.cnblogs.com_ph121_p_6839424.html]: https://www.cnblogs.com/ph121/p/6839424.html
[https_blog.csdn.net_qq_37625033_article_details_57072944]: https://blog.csdn.net/qq_37625033/article/details/57072944
[http_www.it1352.com_634166.html]: http://www.it1352.com/634166.html