什么是CORS

作者: 柏龙 | 来源:发表于2017-04-25 22:35 被阅读141次

    CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 AJAX 跨域请求资源的方式,支持现代浏览器,IE支持10以上。
    CORS与JSONP的使用目的相同,但是比JSONP更强大。JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

    CORS可以分成两种请求

    浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)

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

    • 请求方法是以下三种方法之一:
    HEAD
    GET
    POST
    
    • HTTP的头信息不超出以下几种字段:
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
    

    不同时满足上面两个条件,就属于非简单请求。

    简单请求时 Request Headers 会添加一个 Origin 字段

    Accept:*/*
    Accept-Encoding:gzip, deflate, sdch
    Accept-Language:zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4,pt;q=0.2,fr;q=0.2
    Cache-Control:no-cache
    Connection:keep-alive
    Host:b.code.com:8080
    Origin:http://a.code.com:8080
    Pragma:no-cache
    Referer:http://a.code.com:8080/
    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
    

    以上会出现本次请求来自哪个源(协议 + 域名 + 端口),
    Origin 指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。

    Connection:keep-alive
    Content-Length:430
    Content-Type:application/json; charset=utf-8
    Date:Tue, 25 Apr 2017 14:08:44 GMT
    ETag:W/"1ae-VP1n2Jqobg5OeVKZa52pn4FP1/k"
    X-Powered-By:Express
    

    Response Headers 没有包含 Access-Control-Allow-Origin 字段,
    服务器抛出XMLHttpRequest不能加载的错误

    XMLHttpRequest cannot load http://b.code.com:8080/getNews. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://a.code.com:8080' is therefore not allowed access.
    

    如果 Origin 指定的域名在许可范围内,服务器返回的响应,会多出1个头信息字段。

    Access-Control-Allow-Origin:http://a.code.com:8080
    

    Access-Control-Allow-Origin的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。

    // 限制当前请求http://a.code.com:8080可以获取数据
    header("Access-Control-Allow-Origin", "http://a.code.com:8080"); 
    // 接受任何请求
    // header("Access-Control-Allow-Origin", "*");
    

    以上就可以跨域资源共享,实现跨域。
    查看实例代码
    https://boloog.github.io/demos/Cross-domain/mp4/cors.mp4

    相关文章

      网友评论

        本文标题:什么是CORS

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