江湖小栈

Do Better

0%

CORS 跨域解决方案

发表于 分类于 Hot°C：
本文字数： 1.4k 阅读时长 ≈ 1 分钟
CORS 跨域解决方案

CORS 跨域解决方案简单介绍

名词解释

同源策略

  在Web浏览器中，允许某个网页脚本访问另一个网页的资料，但前提是这两个网页必须有相同的URI、主机名称和端口号。一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。此策略可防止某个网页上的恶意脚本通过该页面的文档物件模型访问另一网页上的敏感性资料。

CORS

  跨源资源共享 (Cross-origin resource sharing) 用于让网页的受限资源(图片、样式、脚本、iframes以及视频)能够被其他域名的页面访问的一种机制。

浏览器支持

  • Chrome 3+
  • Firefox 3.5+
  • Opera 12+
  • Safari 4+
  • IE 8+ (IE 11+ 才完全支持)

CORS流程图

CORS请求操作

简单请求

  • 满足两个条件
    • 请求方法为：HEAD、GET、POST
    • HTTP的头信息不超出以下几种：
      • Accept
      • Accept-Language
      • Content-Language
      • Last-Event-ID
      • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

范例

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
  type:'post',
  url:'https://example.com',
  data:{
   'data': '简单请求'
  },
  success:function(response){
    //do someting
  },
  error:function(jqXHR, textStatus, errorThrown){
    //do someting
  }  
});

非简单请求

  • 满足条件
  • 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。

PHP接收 CORS 注意事项

  • 允许单个网域访问
    1
    header("Access-Control-Allow-Origin:http://example.com");
  • 允许单个页面访问
    1
    header("Access-Control-Allow-Origin:http://example.com/example.html");
  • 允许多个网域访问
    1
    2
    3
    4
    5
    6
    7
    $origin = filter_input(INPUT_SERVER, 'HTTP_ORIGIN');
    $allowOrigin = array( 
    //允许访问的网域
      'http://example1.com',
      'http://example2.com'
    );
    in_array($origin, $allowOrigin) && header("Access-Control-Allow-Origin:" . $origin);

与JSONP的比较

CORSJSONP
浏览器对浏览器版本有要求支持老式浏览器
请求类型所有类型的HTTP请求GET请求
请求次数非简单请求两次一次
bulb