什么是跨域？

跨域问题是由于浏览器为了防止CSRF攻击，避免恶意攻击而带来的风险而采取的同源策略限制。当一个页面中使用XMLHTTPRequest对象发送HTTP请求时（XHR请求），必须保证当前页面和请求的对象是同源的，即协议、域名和端口号要完全一致，否则浏览器就会阻止此跨域请求返回的数据

同源策略

域名A	域名B	是否允许通信
http://www.a.com	https://www.a.com	否
http://www.a.com	http://www.b.com	否
http://www.a.com：80	http://www.a.com：8080	否

什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

JSONP跨域的原理

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。
当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

例如

<script type="text/javascript" src="http://www.a.com?callback=jsonpCallback" />
// 回调函数function jsonpCallback(){ }
</script>

整个过程为：

• script标签设置src属性为请求的地址，并判断回调函数作为参数
• 服务端构建JS脚本，传递返回给客户端的数据
• 客户端在回调函数中解析服务器生成的数据

这样就可以实现浏览器页面的跨域请求，但使用jsonp处理跨域有个很明显额缺点，就是只支持GET，不支持POST请求，就引出了目前使用较广的一种处理跨域的方法：CORS跨域资源共享机制

什么是CORS？

跨域资源共享(CORS) 是一种机制，它允许服务器使用新增的 HTTP 头部信息来告诉浏览器准许访问来自不同源服务器上指定的资源。

某接口返回的response header如下

clipboard.png

Access-Control-Allow-Origin

这个头部信息由服务器返回，用来明确指定那些客户端的域名允许访问这个资源。它的值可以是：

• —— 允许任意域名

https://wqs.jd.com —— 一个完整的域名名字

如果接口请求是需要验证用户身份（request header中包含cookie），那返回的这个值不能为 * 号，必须为完整的域名

Access-Control-Allow-Headers

提供一个逗号分隔的列表表示服务器支持的请求数据类型。假如你使用自定义头部(比如：x-authentication-token 服务器需要在返回OPTIONS请求时，要把这个值放到这个头部里，否则请求会被阻止)。

Access-Control-Allow-Methods

一个逗号分隔的列表，表明服务器支持的请求类型（比如：GET,POST,OPTIONS）

Access-Control-Allow-Credentials

这个头部信息只会在服务器支持通过cookies传递验证信息时才会返回。它的值只有一个就是 true。只有这个值被返回时，才允许浏览器读取response的内容。

还有其他的HTTP头部字段以及使用PUT、DELETE、OPTiON方法请求时的预检查机制，详细可了解可查询官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS