前后端跨域

一、什么是跨域

当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域（如下图所示）。

跨域问题的产生，源自浏览器的一个同源策略。

二、同源策略

同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的JavaScript脚本和另外一个域的内容进行交互。

如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。

所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。

非同源会有以下限制：

• 无法读取非同源网页的Cookie、LocalStorage 和IndexDB。
• 无法接触非同源网页的DOM和 JS 对象。
• 无法向非同源地址发送Ajax请求。

2.1 跨域问题示例

问题描述：已拦截跨源请求：同源策略禁止读取位于 http://localhost:88/api/sys/login 的远程资源。

原因：CORS 头缺少 'Access-Control-Allow-Origin'。

问题分析：这是一种跨域问题。访问的域名和端口和原来的请求不同，请求就会被限制。

三、如何跨域

3.1 跨域解决方案

• Java后端进行跨域解决CORS；
• 使用AJAX的JSONP；
• 使用jQuery的JSONP插件；
• document.domain + iframe 跨域解决方案；
• window.name + iframe 跨域解决方案；
• location.hash +iframe 跨域解决方案；
• postMessage跨域解决方案；
• WebSocket协议跨域解决方案；
• Node代理跨域解决方案；
• Nginx代理跨域解决方案
• …

3.2 常见方案对比及选择

在这些众多的解决方案中，最常用的是JSONP和CORS，其中比较传统的跨域解决方案是 JSONP。

JSONP 虽然能解决跨域问题，但是有一个很大的局限性，那就是 只支持 GET 请求，而不支持其他类型的请求，在RESTful时代几乎就没什么用。

另外一种常见的解决方案是 CORS(跨域源资源共享，Cross-Origin Resource Sharing)，它是一个 W3C 标准，或者说是一种针对浏览器的技术规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，进而实现跨域访问。

3.3 使用SpringBoot解决跨域

@Configuration
public class GatewayCorsConfiguration {

    /* *
     * 网关服务配置跨域。
     */

    @Bean
    public CorsWebFilter corsWebFilter() {
        
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();

        // 放行全部原始头信息
        corsConfiguration.addAllowedHeader("*");
        // 允许所有请求方法跨域调用
        corsConfiguration.addAllowedMethod("*");
        // 允许所有域名进行跨域调用
        corsConfiguration.addAllowedOrigin("*");
        // 允许跨越发送cookie
        corsConfiguration.setAllowCredentials(true);

        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsWebFilter(source);
        
    }

}

3.4 配置跨域及网关路由后请求

四、概念补充

4.1 CORS请求分类

1. 简单请求：

简单请求就是表单请求，浏览器沿袭了传统的处理方式，不把行为复杂化，否则开发者可能转而使用表单，规避 CORS 的限制。

浏览器发出CORS简单请求，只需要 在头信息之中增加一个Origin字段。

所谓的简单请求，就是指HEAD、GET、POST请求，并且HTTP的头信息是以下几种字段之一：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type。

注意：Content-Type只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

2. 非简单请求，也被称为“预检请求”：

简单请求之外的其余请求，就是非简单请求。

浏览器发出CORS非简单请求，会在正式通信之前，增加了一次OPTIONS查询请求，称为"预检"请求(preflight)，用于确认服务器是否允许跨域。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段，只有得到肯定的答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。(流程图如下：)

3. 带凭证的请求，即携带了用户cookie等信息的请求。

4.2 响应头详解

• Access-Control-Allow-Origin（必填）：它的值要么是请求时Origin字段的具体值，要么是一个*，表示被允许的站点。

• Access-Control-Allow-Methods（必填）：它的值是逗号分隔的一个具体的字符串或者*，表示服务器允许跨域的请求方法。（返回的是所有支持的方法，而不单是浏览器请求的那个方法，这是为了避免多次"预检"请求。）

• Access-Control-Expose-Headers（可选）：仅在预检请求的响应字段中有效，表示服务器允许携带的请求头。当CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

• Access-Control-Allow-Credentials（可选）：它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，不发送Cookie，即false。如果对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json，这个值只能设为true。如果服务器不要浏览器发送Cookie，删除该字段即可。

• Access-Control-Max-Age（可选）：用来指定本次预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求。（如果在开发中，发现每次发起的请求都是两条，一次OPTIONS，一次正常请求。注意是每次，那么就需要配置Access-Control-Max-Age，避免每次都发出预检请求。）

五、结束语

---

“-------怕什么真理无穷,进一寸有一寸的欢喜。”

微信公众号搜索：饺子泡牛奶。