跨域问题及使用cors解决跨域问题

跨域问题

跨域：浏览器对javascript的同源策略的限制。

以下情况都属于跨域：

跨域问题说明	示例
域名不同	www.jd.com与www.taobao.xom
域名相同，端口不同	www.jd.com:8080与www.jd.com:8081
二级域名不同	item.jd.com与miaosha.taobao.xom
网络传输协议不同	http和https

以上情况的请求都有可能发生跨域问题，请求路径是对的，页面也会收到响应数据，但是浏览器是不会进行编译跨域的数据的。
这就是浏览器对于javascript的同源策略的限制，在早期的网页开发中的确是保证了网页的安全性。但是在如今网站的规模越来越大，分布式集群的普遍，可能每一个微服务之间都是不同的域名进行访问，反而造成了开发的不便。

如果域名和端口都相同，但是请求路径不同，不属于跨域。如：

www.jd.com/item和www.jd.com/goos就不属于跨域问题

为什么会有跨域问题？

跨域不一定都会出现跨域问题，例如对于静态资源的加载就不会出现跨域问题。

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

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

跨域问题的解决方案

1、jsonp
最早的解决方案，利用script标签可以实现跨域的原理实现。

限制：

• 需要服务的支持
• 只能发起get请求

2、nginx反向代理
利用nginx把跨域反向代理为不跨域，支持各种请求

缺点：需要在nginx中进行额外配置，语义不清晰

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

优势：

• 在服务端进行控制是否允许跨域，可自定义规则
• 支持各种请求方式

缺点：

• 会产生额外的请求

接下来就使用cors解决浏览器的跨域问题。

什么是cors?

cors是一个W3C标准，全称是“跨域资源共享”。

它允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服了ajax只能同源使用的限制。

cors需要浏览器和服务器同时支持。目前，所有的浏览器都支持该功能，IE浏览器不能低于IE10。

• 浏览器端：整个cors通信过程，都是浏览器自动完成，不需要用户参与。
• 服务器端：cors通信与ajax没有任何差别，因此你不需要改变以前的业务逻辑。只不过，浏览器会在请求中携带一些头信息，我们需要以此判断是否允许其跨域，然后在响应头中加入一些信息即可，通常这些操作通过过滤器来完成。

cors原理解析

浏览器在处理ajax请求的时候会将请求分为两类：简单请求、特殊请求。

1、简单请求

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

①请求方法是以下三种方法之一：

• HEAD
• GET
• PUT

②HTTP的头信息不超出以下几种字段

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

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

Origin会告诉服务，该请求来自于哪个域，服务再根据这个值决定是否允许这个请求进行跨域。

如果服务允许该请求进行跨域，会给浏览器响应如下的请求信息：

Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8

• Access-Control-Allow-Origin：服务允许访问的域，相当于一个白名单，是一个具体的域名或者*（代表任意域名）
• Access-Control-Allow-Credentials：是否允许请求携带cookie，默认情况下cors不会携带cookie，除非这个值是true

有关Cookie

想要操作cookie，需要满足三个条件：

• 服务的响应头中需要携带Access-Control-Allow-Credentials并且值为true
• 浏览器发起ajax需要指定withCredentials 为true（该操作由浏览器自动完成）
• 服务的响应头信息 Access-Control-Allow-Origin取值必须是具体的域名，不能是*

2、特殊请求

不符合简单请求条件的请求，会被浏览器判定为特殊请求，例如请求方式是PUT。

预检请求

特殊请求会在正式通信之前，增加一次HTTP查询请求，称之为“预检”请求。
浏览器会实现询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段，只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

一个“预检”请求的模板：

OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

与简单请求相比，除了Origin之外，还多了两个请求消息头：

• Access-Control-Request-Method：接下来会采用的请求方式，例如PUT
• Access-Control-Request-Headers：会额外用到的请求头信息

预检请求的响应

服务接收到预检请求之后，如果允许该请求进行跨域，则会发出响应：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

除了简单请求的响应头信息Access-Control-Allow-Origin和Access-Control-Allow-Credentials之外，对于特殊请求，服务还有额外的三个响应信息：

• Access-Control-Allow-Methods：允许访问的请求请求方式
• Access-Control-Allow-Headers：允许额外携带的请求头
• Access-Control-Max-Age：本次许可的有效时长，单位是秒，在过期之前的ajax请求就无需再次进行预检

总结：

浏览器在处理ajax的简单请求和特殊请求时，会向服务器发送不同的请求头信息，服务器会根据请求头信息判断该请求是否是跨域请求，这一部分是浏览器自动完成的。
而服务器端想要允许某个ajax请求进行跨域请求，就需要反馈给浏览器允许跨域请求的相关信息。
所以，我们只需要在服务器端针对ajax请求进行处理，允许某个域名的跨域请求进行访问即可。

解决跨域问题

了解到什么是跨域问题以及cors对于跨域的ajax访问的处理之后，明白浏览器对于跨域的请求会进行请求消息头处理，作为服务方只需要在响应消息的部分进行对应的处理即可。

在此我们可以使用过滤器来拦截请求，并且给予响应信息，比如允许跨域的域名，允许的请求方式，是否允许cookie等等。

当然，在springmvc中，已经有封装好的API给我们使用，就是CorsFilter过滤器，我们只需要书写一个配置类注入到网关之中即可，之所以选择网关，是因为所有调用服务的请求都会经过网关服务。

CorsFilter配置类：

package com.gateway.config;


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

    @Bean
    public CorsFilter corsFilter(){
        //初始化cors配置对象
        CorsConfiguration corsConfiguration=new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("http://manage.leyou.com");  //允许跨域访问的域名
        corsConfiguration.setAllowCredentials(true);    //是否允许传递cookie
        corsConfiguration.addAllowedMethod("*");    //允许的请求方式
        corsConfiguration.addAllowedHeader("*");    //允许使用的消息头
        //初始化cors配置源对象
        UrlBasedCorsConfigurationSource configurationSource=new UrlBasedCorsConfigurationSource();
            //拦截所有的请求，使用配置对象规则进行跨域问题的解决
        configurationSource.registerCorsConfiguration("/**",corsConfiguration);
        //返回filter实例
        return new CorsFilter(configurationSource);
    }
}