cors

作者: mikixing | 来源:发表于2018-11-25 20:02 被阅读0次

    一.cors简介

    概念:CORS需要浏览器和服务器同时支持.整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
    cors跨域分为两种,1:简单请求;2:非简单请求
    同时满足两个条件就是简单请求:

    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

    二.cors流程

    1.简单请求

    origin字段:
    浏览器直接发出cors简单请求,在头信息中,增加一个origin字段,服务器根据这个值决定是否同意这次请求.如果origin指定的源不在许可范围内,服务器也会返回正常http回应(测试结果发现返回值是200),浏览器发现返回的头信息中没有包含Access-Control-Allow-Origin字段,就会抛出一个错误,被XMLHttpRequest的onerror回调函数捕获,在控制台显示.如果origin指定的域名在许可范围内,服务器返回就会多出Access-Control-Allow-Origin字段.

    Access-Control-Allow-Origin:这个字段要么是一个确切的域名和端口(没有端口默认是80),表明只接受这个域名的跨域请求,要么是'*',表明接受任意域名的请求.

    Access-Control-Allow-Credentials:表示请求是否允许发送cookie.如果要发送cookie到服务器,要在服务器端设置Access-Control-Allow-Credentials:true,另外,还要打开xhr对象的withCredentials属性xhr.withCredentials=true.需要注意的是,设置Access-Control-Allow-Credentials:true后,Access-Control-Allow-Origin不能设置为'*',必须指定明确的域名.同时,cookie仍然遵循同源策略,只有用服务器域名设置的cookie才会上传,其他域名的cookie并不会上传,且原网页代码中的document.cookie也不能读取服务器域名下的cookie.

    2.非简单请求

    非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json
    非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。
    浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。
    "预检"请求用的请求方法是OPTIONS,表示这个请求是用来询问的。头信息里面,关键字段是Origin,表示请求来自哪个源。
    除了Origin字段,"预检"请求的头信息包括两个特殊字段。
    (1)Access-Control-Request-Method
    该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法
    (2)Access-Control-Request-Headers
    该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段

    ajax({
        url: url,
        params: {},
        method: 'get',
        contentType: 'application/json',
        success: function () {
             console.log(123)
        }
    })
    
    预检请求的请求头:
    预检请求请求头.png
    预检请求的响应头:
    预检请求响应.png
    其他cors请求的相关字段

    (1) Access-Control-Allow-Methods
    该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
    (2)Access-Control-Allow-Headers
    如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。
    (3)Access-Control-Allow-Credentials
    该字段与简单请求时的含义相同。
    (4)Access-Control-Max-Age
    该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求。

    相关文章

      网友评论

          本文标题:cors

          本文链接:https://www.haomeiwen.com/subject/bsfmqqtx.html