【跨域】使用CorsConfig和注解，解决跨域

什么是浏览器的跨域

• 在百度的网站控制台通过fetch()访问百度，没有问题
• 在百度的网站控制台通过fetch()访问淘宝，就会报错，这就是人们常说的跨域喽
  

1.同源策略

1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。

最初，它的含义是指，A 网页设置的 Cookie，B 网页不能打开，除非这两个网页“同源”。所谓“同源”指的是“三个相同”：

• 协议相同
• 域名相同
• 端口相同

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

设想这样一种情况：A 网站是一家银行，用户登录以后，A 网站在用户的机器上设置了一个 Cookie，包含了一些隐私信息（比如存款总额）。用户离开 A 网站以后，又去访问 B 网站，如果没有同源限制，B 网站可以读取 A 网站的 Cookie，那么隐私信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

由此可见，同源政策是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

随着互联网的发展，同源政策越来越严格。目前，如果非同源，共有三种行为受到限制。

1. 无法获取非同源网页的 cookie、localstorage 和 indexedDB。
2. 无法访问非同源网页的 DOM （iframe）。
3. 无法向非同源地址发送 AJAX 请求 或 fetch 请求（可以发送，但浏览器拒绝接受响应）。

2.Ajax 跨域

浏览器的同源策略会导致跨域，也就是说，如果协议、域名或者端口有一个不同，都被当作是不同的域，就不能使用 Ajax 向不同源的服务器发送 HTTP 请求。首先我们要明确一个问题，请求跨域了，请求到底发出去没有？答案是肯定发出去了，但是浏览器拦截了响应。

3.为什么要有跨域

Ajax 的同源策略主要是为了防止 CSRF（跨站请求伪造） 攻击，如果没有 AJAX 同源策略，相当危险，我们发起的每一次 HTTP 请求都会带上请求地址对应的 cookie，那么可以做如下攻击：

1. 用户登录了自己的银行页面 mybank.com，mybank.com向用户的cookie中添加用户标识。
2. 用户浏览了恶意页面 evil.com。执行了页面中的恶意AJAX请求代码。
3. evil.com向http://mybank.com发起AJAX HTTP请求，请求会默认把http://mybank.com对应cookie也同时发送过去。
4. 银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
5. 而且由于Ajax在后台执行，用户无法感知这一过程。

DOM同源策略也一样，如果 iframe 之间可以跨域访问，可以这样攻击：

1. 做一个假网站，里面用iframe嵌套一个银行网站 mybank.com。
2. 把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
3. 这时如果用户输入账号密码，我们的主网站可以跨域访问到http://mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。

所以说有了跨域跨域限制之后，我们才能更安全的上网了。

跨域的解决方式

为了解决浏览器跨域问题，W3C 提出了跨源资源共享方案，即 CORS(Cross-Origin Resource Sharing)。它允许浏览器向跨源服务器，发出XMLHttpRequest请求。

其实，准确的来说，跨域机制是阻止了数据的跨域获取，不是阻止请求发送。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨域通信。

CORS 将请求分为两类：简单请求和非简单请求，分别对跨域通信提供了支持。

1.Spring boot配置

spring mvc 4.2版本增加了对cors的支持，通过spring boot可以非常简单的实现跨域访问。

• 使用@CrossOrigin 注解实现

package com.xdx97.backstage.controller;
 
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
 
/**
 * 解决跨域请求的
 */
 
@Configuration
public class CorsConfig {
    private CorsConfiguration corsFilter() {
        CorsConfiguration config= new CorsConfiguration();
        //  你需要跨域的地址
        // * 表示对所有的地址都可以访问
        config.addAllowedOrigin("*");
        //  跨域的请求头
        config.addAllowedHeader("*"); // 2
        //  跨域的请求方法
        config.addAllowedMethod("*"); // 3
        //加上了这一句，大致意思是可以携带 cookie
        //最终的结果是可以 在跨域请求的时候获取同一个 session
        config.setAllowCredentials(true);
        
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        //配置 可以访问的地址
        source.registerCorsConfiguration("/**", config()); // 4
        return new CorsFilter(source);
    }
}