本文简单介绍下跨域, 看完成果:了解跨域

1.什么同源?

        为了保证浏览器的安全,不同源的客户端脚本在没有明确授权的情况下, 不能读写对方资源.这叫做同源, 同源策略是浏览器的安全基石.

        如果一个请求地址里面协议, 域名和端口号都相同,就属于同源.

        在同源策略下,非同源的网站之间发送AJAX请求,如有需要,可通过降域或其他技术实现.

2.CORS技术

     cors(Crosss-OriginResource Sharing) ,CORS可以在不破坏既有规则的情况下,通过后端服务器实现

CORS接口, 从而实现跨域通行,CORS将请求分为两类:简单请求和非简单请求,分别对跨域通信提供了支持.

       2.1: 简单请求

           在CROS之前, 发送HTTP请求时在头信息中不能包含任何自定义的字段,且HTTP信息不能超过以下几个字段:

            Accept

            Accept-Language

            Content-Language

            Last-Even-ID

            Content-Type(仅限于[application/x-www-form-urlencoded /multipart/form-data/text/plain]类型)

            对于简单的请求,CORS的策略是在请求头中增加一个Origin字段服务器收到请求后,根据该字段

判断是否允许该请求访问.

            如果允许就在Http头信息中添加Access-Control-Allow-Origin字段,并返回正确的结果.

            如果不允许, 就不在Http头信息中添加Access-Controll-Allow-Origin字段

             另外: 可选,还有Access-Control-Allow-Credentials: 可选,用户是否发送,处理cookie

                      可选 ,Access-Control-Expose-Headers :可以让用户拿到的字段,有几个字段,有几个字段无论设置与否都可以拿到的,包括Cache-Control  Content-Lanaguage  Content-Type  . Expires. Last-Modiified . Pragma 

        2.2非简单请求

        浏览器会在真实请求发出前增加一次OPTION请求,称为预检请求.预检请求将真实请求信息,包括请求方法,自定义头字段 , 源信息添加到HTTP头信息字段中,询问服务器是否允许这样的操作.

        例如:一个GET请求:

        OPTIONS: /test HTTP/1.1

        Origin:http://www.test.com

        Access-Control-Request-Method:Get

        Access-Control-Request-Headers:X-Custom-Header

        Host:www.test.com

        与CORS相关的字段有:

        请求使用的HTTP方法Access-Control-Request-Method

        请求中包含的自定义头字段Access-Control-Request-Headers.

         服务器收到请求时,需要分别对Origin   Access-Control-Request-Method , 

Access-Control-Request-Headers 进行验证,验证通过后, 会在返回HTTP 头信息中添加;

Access-Control-Allow-Origin: http://www.test.com

#真实请求允许的方法

Access-Control-Allow-Method:GET , POST , PUT , DELETE

#服务器允许使用的字段

Access-Control-Allow-Headers: X-Custom-Header

#是否允许用户发送,处理cookie

Access-Control-Allow-Credentials:true

#预检请求的有效期,单位为秒.有效期内,不会重复发送预检请求.

Access-Control-Max-Age:1728000

当预检请求通过后, 浏览器才会发送真实请求到服务器.这样就实现了跨域资源的的请求访问.