解決前端跨域問題

自己搞了一個前后端分離的項目，前端用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 }


或者

@Configuration
public class CorsConfig  {

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); //允許任何域名
        corsConfiguration.addAllowedHeader("*"); //允許任何頭
        corsConfiguration.addAllowedMethod("*"); //允許任何方法
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); //注冊
        return new CorsFilter(source);
    }


}

再次訪問就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