day7——CORS跨域问题

一：

跨域原因说明         示例

域名不同             www.jd.com 与 www.taobao.com

域名相同，端口不同     www.jd.com:8080 与 www.jd.com:8081

二级域名不同         item.jd.com 与 miaosha.jd.com

 

二：

跨域不一定会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是与当前页域名相同的路径，这能有效的阻止跨站攻击。

因此：跨域问题 是针对ajax的一种限制。

但是这却给我们的开发带来了不便，而且在实际生产环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

 

三：

CORS

规范化的跨域请求解决方案，安全可靠。

优势：

在服务端进行控制是否允许跨域，可自定义规则

支持各种请求方式

缺点：

会产生额外的请求

 

四：

浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求。

1.简单请求

只要同时满足以下两大条件，就属于简单请求。：

（1) 请求方法是以下三种方法之一：

HEAD、GET、POST

（2）HTTP的头信息不超出以下几种字段：

Accept、Accept-Language、Content-Language、Last-Event-ID

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

当浏览器发现发起的ajax请求是简单请求时，会在请求头中携带一个字段：Origin.

 

五：

实现非常简单，虽然原理比较复杂，但是前面说过：

浏览器端都有浏览器自动完成，我们无需操心

服务端可以通过拦截器统一实现，不必每次都去进行跨域判定的编写。

事实上，SpringMVC已经帮我们写好了CORS的跨域过滤器：CorsFilter ,内部已经实现了刚才所讲的判定逻辑，我们直接用就好了。

在ly-api-gateway中编写一个配置类，并且注册CorsFilter：

 

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 GlobalCorsConfig {

    @Bean

    public CorsFilter corsFilter() {

        //1.添加CORS配置信息

        CorsConfiguration config = new CorsConfiguration();

        //1) 允许的域,不要写*，否则cookie就无法使用了

        config.addAllowedOrigin("http://manage.leyou.com");

        //2) 是否发送Cookie信息

        config.setAllowCredentials(true);

        //3) 允许的请求方式

        config.addAllowedMethod("OPTIONS");

        config.addAllowedMethod("HEAD");

        config.addAllowedMethod("GET");

        config.addAllowedMethod("PUT");

        config.addAllowedMethod("POST");

        config.addAllowedMethod("DELETE");

        config.addAllowedMethod("PATCH");

        // 4）允许的头信息

        config.addAllowedHeader("*");

 

        //2.添加映射路径，我们拦截一切请求

        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();

        configSource.registerCorsConfiguration("/**", config);

 

        //3.返回新的CorsFilter.

        return new CorsFilter(configSource);

    }

}

 

补充：Ajax请求的五个步骤

1. 创建XMLHttpRequest异步对象
2. 设置回调函数
3. 使用open方法与服务器建立连接
4. 向服务器发送数据
5. 在回调函数中针对不同的响应状态进行处理