同源策略、跨域、JSONP

1. 什么是同源策略?

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互

一个源的定义：如果协议，端口（如果指定了一个）和主机对于两个页面是相同的，则两个页面具有相同的源。

拓展：浏览器的同源策略_MDN

2. 什么是跨域？跨域有几种请求？

跨域：从一个页面去请求读或者写另一个页面的资源，突破同源策略的限制。

跨域有以下几种请求：

• 降域，主域名相同，子域不同的，如：child1.a.com 和 a.com，可通过设置document.domain = 'a.com' 达到降域的目的，实现跨域访问
• JSONP (JSON with padding)，由回调函数和数据组成。回调函数是当响应到来时应该在页面中调用的函数。回调函数一般是在请求中制定的。而数据就是传入回调函数中的 JSON 数据
• CORS (Cross-Origin Resource Sharing) 跨源资源共享，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。CORS 就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败
• HTML5 的 postMessage

拓展：JavaScript跨域总结与解决办法

3. JSONP 的原理是什么？

原理是利用 script 标签的可跨域性，在网页中动态创建添加 script 标签，请求需要访问的页面资源的 URL，服务器降数据放在一个知道指定名字的回调函数给传回来，由于网页已经定义了回调函数，参数返回之后，就会执行

4. CORS 是什么？

• CORS 需要浏览器和服务器同时支持。目前所有浏览器都支持这个功能，IE10 以下不完全支持
• 整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源 AJAX 通信没有差别，代码完全一样，浏览器一旦发现 AJAX 请求跨域，就会自动添加一些附加的头部信息，有时还会多出一次附加的请求，但用户不会有感觉

实例：(a.com 请求 b.com 的资源)

在发送请求时，浏览器给它附加一个额外的 Origin 头部，Origin: http://www.a.com。如果服务器认为这个请求可以接受，就在 Access-Control-Allow-Origin: http://www.a.com 头部中回发相同的源信息（如果是公共资源，可以回发 "*"）

如果没有这个头部，或者有这个头部但源信息不匹配，浏览器就回驳回请求。正常情况下，浏览器会处理请求。注意，请求和响应都不包含 cookie 信息

拓展：跨资源共享 CORS 详解

代码：

1. 本地搭建服务器，演示同源策略

a.com 请求 b.com

// a.com/
$.get('//b.com/b_data.php', function(response) {
  console.log(response);
});

// b_data.php
echo 1234;

同源策略.png

2. 解决跨域问题

1. 使用 JSONP

// a.com/a_JSONP.html
function xxx(data) {
  alert(data);
}

// 添加 script 标签
function addScriptTag(src) {
  var script = document.createElement('script');
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function() {
  addScriptTag('http://b.com/b_JSONP.php?callback=xxx');
}

// b.com/b_JSONP.php
$data=$_GET['callback'];
echo $data . '(' . 1234 . ')';

使用 JSONP.png

2. 使用 CORS

// a.com/a_CORS.html
$.get('//b.com/b_CORS.php', function(response) {
  alert(response);
});

// b.com/b_CORS.php
header("Access-Control-Allow-Origin: http://a.com");
echo "b.com的数据";

使用 CORS.png