跨域（JSONP、CORS、代理与反向代理）

同源策略

是对XHR的一个主要约束，他为通信设置了“相同的域、相同的接口、相同的协议”这一限制。

JSONP

JSONP（JSON with padding）由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面调用的函数，数据是传入回调函数中的JSON数据。

//回调函数是handleResponse()
http://freegeoip.net/json/?callback=handleResponse

JSONP是通过动态<script>使用的，使用时可以通过src属性指定一个跨域的URL

<script type="text/javascript">
	function handleResponse(res) {
		console.log(res);
	};
	var script = document.createElement("script");
	script.src = "http://freegeoip.net/json/?callback=handleResponse";
	document.body.insertBefore(script, document.body.firstChild);
</script>

JSONP的不足

1、当JSONP从其他域加载代码时，如果其他域不安全，可能会响应其中一些带有恶意的代码。
2、确定JSONP请求是否失败并不容易。

参考链接：
正确面对跨域，别慌

CORS

CORS（Cross-Origin Resource Sharing）跨域资源共享，使用自定义的HTTP头部让浏览器与服务器进行沟通，从而确定请求或响应时成功还是失败。
CORS请求分为简单请求和非简单请求，非简单请求会先进行一次OPTION方法进行预检，看是否允许当前跨域请求。

简单请求

只要同时满足以下两大条件，就属于简单请求。凡是不同时满足上面两个条件，就属于非简单请求。

请求方法是以下三种方法之一：

• HEAD
• GET
• POST

HTTP的请求头信息不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

后端的响应头信息：

• Access-Control-Allow-Origin：该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
• Access-Control-Allow-Credentials：该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。
• Access-Control-Expose-Headers：该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

• Access-Control-Request-Method：该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。
• Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。
  如果浏览器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。

参考链接：
跨域资源共享 CORS 详解——阮一峰的网络日志
跨域——CORS 详解

代理与反向代理

代理

代理，也称正向代理，意思是一个位于客户端和目标服务器(target server)之间的服务器，为了从目标服务器取得内容，客户端向代理发送一个请求并指定目标(目标服务器)，然后代理向目标服务器转交请求并将获得的内容返回给客户端。

数据流程：

• 数据请求过程：浏览器-》代理服务器-》目标服务器
• 数据返回过程：目标服务器-》代理服务器-》浏览器

反向代理

反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

数据流程：

• 数据请求过程：浏览器-》【反向代理服务器-》处理数据的服务器】
• 数据返回过程：【处理数据的服务器-》反向代理服务器】-》浏览器

参考链接：
纯前端解决跨域问题
【前端词典】如何向老板解释反向代理