zoukankan      html  css  js  c++  java
  • 辛星浅析跨域传输的CORS解决方式

        首先我们有一个概念。那就是“同源准则",也就是same-origin  policy,它要求一个站点(协议+主机+port号)来确定的脚本、XMLHttpRequest和Websocket无权去訪问还有一个站点的内容。

         假设设置不对,它一般会报错例如以下:No 'Access-Control-Allow-Origin' header is present on the requested resource。

         所谓CORS,也就是Cross-Origin  Resource  Sharing,它的基本原理是通过设置HTTP请求和返回中的header,告诉浏览器该请求是合法的。这就涉及到server和浏览器两方的设置:请求的发起(Http  Request  Header)和server对请求正确的响应(Http  Response  Header).

         我们能够使用原生的javascript来通过XMLHttpRequest或者XDomainRequest来发起请求,我们也能够通过jQuery的$.ajax()来发起XHR或者CORS请求。只是该方法不支持IE下的XDomainRequest,我们须要另外的插件来解决问题。

          当中通过jQuery调用的范例乳腺癌:

           $.ajax({

           type:'GET',

           url:'http://www.aaa.com',

           contentType:'text/plain',

           success:function(){},

            error:function(){}

            }});

            依据请求的内容不同。浏览器会须要加入相应的Header或者发起额外的请求。当中的细节都由浏览器来处理,对于用户来将是透明的。

            一般我们将CORS分为两类:(1)简单请求   (2)不是那么简单的请求

            所谓简单请求,就是请求类型必须是GET、POST、HEAD三者中的一个,请求头Header中仅仅能包括:Accept、Accept Language、Content  Language、Last Event ID、Content Type,并且Content Type仅仅接受application/x-www-form-urlencoded、multipart/form-data、text/plain这三种。

           除了上面的条件,比方PUT、DELETE或者Content Type是application/json。均为"不是那么简单的请求".这样的请求浏览器会在真实请求之前,额外发起一次类型为OPTIONS的请求(preflight  request),仅仅有server正确的响应了OPTIONS请求之后。浏览器才会发起该请求。

         对于简单请求。以下是b.com向a.com发起的一次GET请求的范例:

    GET /xin   HTTP/1.1
    Origin: http://b.com
    Host: a.com
    Accept-Language: en-US
    Connection: keep-alive
    User-Agent: Mozilla/5.0...
        在响应之前,当中我们的头部应该这么设置,以下是一个范例:

    Access-Control-Allow-Origin: http://b.com
    Access-Control-Allow-Credentials: true
    Access-Control-Expose-Headers: FooBar
    Content-Type: text/html; charset=utf-8
    

        当中Access-Control-Allow-Origin是Server同意跨域訪问的域名列表。假设我们同意随意站点请求资源,此处能够填写"*",而Access-Control-Expose-Headers能够设置返回额Header以传递数据,简单请求中同意使用的Header包含:Cache-Control,Content-Language,Content-Type。Expires。Last-Modified。Pragma。

         对于不是那么简单的去年跪求,以下是一个范例:

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

        当中Access-Control-Request-Method代表真实请求的类型,而Access-Control-Request-Headers则代表真实请求的请求头的key内容。server在验证了这两项内容的合法性之后才会允许浏览器发起真实的请求。 

        以下是相应的响应的头部设置:

    Access-Control-Allow-Origin: http://b.com
    Access-Control-Allow-Methods: GET, POST, PUT
    Access-Control-Allow-Headers: X-Custom-Header
    Content-Type: text/html; charset=utf-8
          另一个就是Access-Control-Max-Age,它是浏览器保存的一个缓存的时间,单位是秒。在缓存过期之前,浏览器无须再次验证同一类型的请求是否合法。
       
       

           

          

    
  • 相关阅读:
    AS3加载文件时的异常捕获
    经典语句
    南阳ACM 题目71:独木舟上的旅行 Java版
    南阳ACM 题目71:独木舟上的旅行 Java版
    南阳ACM 题目275:队花的烦恼一 Java版
    南阳ACM 题目275:队花的烦恼一 Java版
    仿微信中加载网页时带线行进度条的WebView的实现
    仿微信中加载网页时带线行进度条的WebView的实现
    Android实现自动定位城市并获取天气信息
    Android实现自动定位城市并获取天气信息
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5276388.html
Copyright © 2011-2022 走看看