第四章 跨域

1 同源策略

1)什么是同源策略?

同源策略 (Same-Origin Policy) 最早由 Netscape 公司提出,是浏览器的一种安全策略。

2)什么是同源?

同源指的是协议、域名、端口号必须完全相同。

3)什么是跨域?

违背同源策略就是跨域。

4)跨域解决方案有什么?

  1. CORS
  2. JSONP
  3. 搭建代理服务器

2 CORS

1) CORS是什么?

CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 GET、POST 等所有的请求方式。

2)CORS怎么工作的?

CORS是通过设置一个响应头 Access-Control-Allow-Origin 来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行。

3)相关响应头介绍:

Access-Control-Allow-Origin:允许的域名,多个域名使用逗号隔开,设置为 *,表示允许所有的域名。

Access-Control-Allow-Credentials:该字段可选。它的值是一个布尔值,表示是否允许发送 Cookie。默认情况下,Cookie不包括在跨域请求之中

Access-Control-Expose-Headers:该字段可选。跨域请求时,XMLHttpRequest 对象的 getResponseHeader()方 法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: content-type,cache-control

3) 允许跨域请求携带 Cookie

在同源请求时,Ajax 发出的请求会默认携带 cookie 信息,无需进行额外的设置。

跨域请求中,默认不允许携带Cookie,如果想在跨域请求中携带 cookie,需要满足以下条件:

  1. XMLHttpRequest 对象的 withCredentials 属性必须设置为 true ,表示允许发送跨域请求时携带身份凭证(包括 Cookie、Authorization 等)。
  2. 服务器端必须设置 Access-Control-Allow-Credentials 头信息为 true ,表示允许接受跨域请求时携带身份凭证。
  3. 服务器端必须设置 Access-Control-Allow-Origin 头信息为具体的域名,不能设置为通配符 * ,表示只允许指定的域名访问资源。
  4. 如果在请求头中添加了其他自定义头信息,例如 Authorization ,则需要在服务器端设置 Access-Control-Allow-Headers 头信息,否则浏览器也不会发送 Cookie。
  5. 所有设置的 Cookie 需要设置相关属性 Secure 和 SameSite=None,才允许被跨域携带。

3 JSONP

1) 什么是JSONP ?

JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明才智开发出来,只支持 GET 请求方式。

在网页有一些标签天生具有跨域能力,比如:img link iframe script,JSONP就是利用 script 标签的跨域能力来发送请求的。

2)JSONP 使用步骤

// 1.动态的创建一个script标签
var script = document.createElement("script");

// 2.设置script的 src
script.src = "http://localhost:3000/testAJAX?callback=abc";

// 3. 定义回调函数
function abc(data) {
    alert(data.name);
};

// 4.将script添加到 body 中,会发送请求
document.body.appendChild(script);

3)服务端的处理

服务端需要将 js 代码作为响应体:

var callback = req.query.callback;
var obj = {
  name:"孙悟空",
  age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");

4)jQuery 中 jsonp 的使用

$.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?",function (data) {
  //获取所有的电影的条目
  var subjects = data.subjects;
  //遍历电影条目
  for(var i=0 ; i<subjects.length ; i++){
    $("#list").append("<li>"+
                      subjects[i].title+"<br />"+
                      "<img src=\""+subjects[i].images.large+"\" >"+
                      "</li>");
  }
});

results matching ""

    No results matching ""