SpringSecurity-15-解决跨域访问

什么是跨域

跨域是一种浏览器同源安全策略，是一种约定，是浏览器单方面限制脚本跨域访问，它会限制同一个域的JavaScript脚本和另一个域的内容进行交互，同源指的是两个页面具有相同的协议（protocol）、主机(host)和端口号(port)。同源政策的目的是为了保护用户信息的安全，防止恶意网站窃取数据一些人认为资源跨域时无法请求访问，实际是请求可以正常发起(部分浏览器存在特例)，后端服务也正常处理了，但是在返回的时候被浏览器进行了拦截，导致响应内容不可使用。

举例说明跨域，当一个请求url的协议、域名、端口三个之中任意一个和当前页面的url不同就是跨域

跨域的限制

如果请求url和当前页面非同源，会对以下三种行为做出限制：

• Cookie、LocalStorage和IndexDB无法读取
• DOM无法获取
• AJAX请求不能发送

解决跨域方式

JSONP解决跨域

JSONP是解决服务器和客户端跨域相互访问的常用方法。特点是简单实用，老式浏览器全部支持，服务器改造小。

基本思路是在网页端添加一个<script>原有，向服务器请求JSON数据，这种做法没有同源政策的限制，服务器收到请求后，将数据放在指定的回调函数中传到前端页面。具体步骤：

• 在网页端插入<script>元素

<script>
 function addScriptTag(src) {
      var script = document.createElement('script');
      script.setAttribute("type","text/javascript");
      script.src = src;
      document.body.appendChild(script);
    }

    window.onload = function () {
      addScriptTag('http://example.com/ip?callback=foo');
    }

    function foo(data) {
      console.log('Your public IP address is: ' + data.ip);
    };
</script>

• 服务器收到请求后，将数据放在回调函数返回到页面

foo({
  "ip": "8.8.8.8"
});

注：JSONP只支持GET请求跨域，局限比较大。

CORS

CORS（Cross-Origin Resource Sharing）的规范中有一组新增的HTTP首部字段,允许服务器声明其 提供的资源允许哪些站点跨域使用。是解决AJAX跨域请求的根本解决方法。浏览器发出CORS请求的时候需要在信息头中添加Origin字段。浏览器请求中的CORS字段有以下：

request部分：

//下面两个只有预检请求会带

• Access-Control-Request-Method :   //告诉服务器我要用什么方法，服务器会根据配置做下筛选 再返回一个Access-Control-Allow-Methods告诉浏览器哪些可以用
• Access-Control-Request-Headers:   //告诉服务器我要带哪些header，服务器会根据配置做下筛选 再返回一个Access-Control-Allow-Headers告诉浏览器哪些可以

response部分：

• Access-Control-Allow-Origin：他的值可以是请求时Origin字段的值，也可以是*，表示接受任意域名的请求

• Access-Control-Allow-Credentials：是一个boolean值，表示十分允许发送Cookie,默认情况CORS中不包括Cookie,如果设置为true，表示服务器允许Cookie包含在请求中。

• Access-Control-Expose-Headers：XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('TestBar')可以返回TestBar字段的值

• Access-Control-Allow-Methods：它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法,如POST GET.

• Access-Control-Allow-Headers：如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。

• Access-Control-Max-Age:告诉浏览器多久不需要再发出预检请求

Spring Security 中的配置CORS

• 添加GlobalCorsConfig配置文件来允许跨域访问,覆盖默认的CorsFilter来解决该问题

 /**
     * 允许跨域调用的过滤器     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允许所有域名进行跨域调用
        config.addAllowedOrigin("*");
        //允许跨域发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }

• Spring Security为我们提供了一种新的CORS规则的配置方法：CorsConfigurationSource 。使用这种方法实现的注入一个CorsFilter过滤器。

   @Bean
    public CorsConfigurationSource corsConfigurationSource(){
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("https://www.baidu.com"));
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",configuration);
        return source;
    }

注：这两种方法选择一种就可以。