CORS跨域说明

最新推荐文章于 2024-03-29 16:01:56 发布

转载最新推荐文章于 2024-03-29 16:01:56 发布 · 462 阅读

文章标签：

#CORS #跨域

HTML+CSS 专栏收录该内容

4 篇文章

订阅专栏

在现代浏览器上写ajax请求主要是依赖于XMLHttpRequest对象
解决ajax请求同源策略办法
1.利用flash进行交互
2.同源下假设代理服务器
3.JSONP 但是只能get请求，并且要求只能返回javascript 这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源
4.CORS  如果你的浏览器支持HTML5，那么就可以一劳永逸使用新的跨域策略：CORS

    CORS全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源
    了解CORS之前我们先搞明白概念
    Origin表示本域，也就是浏览器当前页面的域。当浏览器向外域发送请求的时候，浏览器接收到响应之后，首先检查
    Access-Control-Allow-Origin是否包含本域，如果是则请求成功，如果不是则失败
    用下面的图来说明
                    GET /res/abc.data
                    Host:sina.com
                    User-Agent:Mozila/5.0 xxx
                    Origin:http://my.com
           my.com   ---------------------------------------------> sina.com
                    <---------------------------------------------
                    Http/1.1 200 ok
                    Access-AControl-Allow-Origin:http://my.com
                    Content-Type:application/xml

                    [xml data...]

   上面的这种跨域称之为简单请求，简单请求包括GET、HEAD、和POST(POST的Content-Type类型仅限application/x-www-form-urlencoded、
   multipart/form-data和text/plain,并且不能出现任何自定义头(例如 X-Custom:12345)，通常可以满足90%的需求
   对于PUT、DELETE以及其它类型如application/json的POST请求,在发送ajax请求之前会发送一个OPTIONS请求(称为preflighted请求)
   到这个URL上询问目标服务器是否接受
                 OPTIONS /path/to/resource HTTP/1.1
                 Host: bar.com
                 Origin: http://my.com
                 Access-Control-Request-Method: POST
 服务器必须响应并明确指出允许的Method：
                 HTTP/1.1 200 OK
                 Access-Control-Allow-Origin: http://my.com
                 Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
                 Access-Control-Max-Age: 86400