解决跨域前端跨域问题

Posted 2022-11-23 yyznl

自己搞了一个前后端分离的项目，前端用ajax请求，json数据交互。但是前端访问后台接口出现了一个坑

“jquery-2.1.4.min.js:4 Access to XMLHttpRequest at ‘localhost:8080/login?password=123456‘ from origin ‘http://localhost:63342‘ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.”

一直报这个错，了解是跨域问题，因为前后端分离所以前端后端资源不在一起，由于同源策略所以报这个错误。

解决的话直接在后台写一个跨域配置过滤器

 1 @Component
 2 public class CorsFilter implements Filter 
 3 
 4     @Override
 5     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException 
 6         HttpServletRequest request = (HttpServletRequest) servletRequest;
 7         HttpServletResponse response = (HttpServletResponse) servletResponse;
 8         response.setHeader("Access-Control-Allow-Origin", "*");
 9         response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT, GET");
10         response.setHeader("Access-Control-Max-Age", "3600");
11         response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
12         filterChain.doFilter(servletRequest, servletResponse);
13     
14 

再次访问就OK了！

 

“最重要的就是Access-Control-Allow-Origin，标识允许哪个域的请求。当然，如果服务器不通过，根本没有这个字段，接着触发XHR的onerror，再接着你就看到浏览器的提示xxx的服务器没有响应Access-Control-Allow-Origin字段”

//指定允许其他域名访问
‘Access-Control-Allow-Origin:http://172.20.0.206‘//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
‘Access-Control-Allow-Credentials:true‘

后来在简书上看到的一篇文章才发现原来是这里的问题！！

 

前端当时也找到了一个解决办法

 $.ajax(
                type:"GET",
                url:"http://localhost:8080/xxx",
		data:,
                dataType: ‘jsonp‘,
                crossDomain: true
            )
		

就是dataType设置为jsonp，crossDomain设置为true