解决跨域前端跨域问题

Posted yyznl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决跨域前端跨域问题相关的知识,希望对你有一定的参考价值。

自己搞了一个前后端分离的项目,前端用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,标识允许哪个域的请求。当然,如果服务器不通过,根本没有这个字段,接着触发XHRonerror,再接着你就看到浏览器的提示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

以上是关于解决跨域前端跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

nginx配置解决前端跨域问题

如何处理前端js跨域问题

请求接口时跨域问题,前端解决方法

如何解决ajax跨域问题

前端设置请求头可以解决跨域问题吗

前端的跨域问题理解