解決前端跨域問題

本身搞了一個先後端分離的項目，前端用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