JSONP实现跨域的方式
一、解决跨域问题的原因：解除同源策略对于浏览器的限制。
同源策略：同源策略是一种约定，是浏览器最基本最核心的安全功能。是为了防止浏览器受到XSS，CSRF等攻击。
同源指的是协议、端口、域名都相同时，则为同源。如果这三个中只要有一个不同也不是同源。
同源策略的限制：
- 1、Cookie、localStorage和indexDB无法读取。
- 2、DOM和JS对象不能获得
- 3、AJAX不能发送
虽然同源策略有一些限制，但是允许<script>标签的src属性，<link>标签的ref属性和<img>标签的src属性跨域进行资源请求。
二、跨域 跨域指的是一个域之下的脚本或者文档去请求另一个域之下的资源，这个过程就是跨域。
三、实现跨域的方式
1、JSONP实现跨域
JSONP实现跨域的原理：动态创建<script>标签，利用<script>的src属性不受同源策略的限制，实现跨域获取数据。
JSONP由两部分组成：回调函数和数据。回调函数是响应在该页面触发时调用的函数。程序示例：
前端代码如下：
//动态创建<script>标签，并且设置src的值
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
function handleResponse(response){
//对response数据操作的代码
}
服务端代码如下：
//这里的handleCallback是服务端接收到回调函数名参数后构造生成的
handleCallback({"status": true, "user": "admin"})
JSONP实现跨域的方法只能用于GET请求，获取到的是JavaScript执行代码。
CORS实现跨域
-
相比于JSONP方式，CORS支持POST提交，通过CORS实现跨域的原理就是在响应头header中注入Access-Control-Allow-Origin，就可以实现跨域的操作了。CORS需要浏览器和服务器同时支持，目前绝大多数浏览器都支持，IE浏览器不能低于IE10。使用CORS实现跨域的过程是浏览器自动完成的，只要服务器端实现了CORS接口就可以实现跨域通信。
-
对于简单请求，浏览器会直接发送CORS请求，具体说来就是在header中加入origin请求头字段。同样，在响应头中，返回服务器设置的相关CORS头部字段，Access-Control-Allow-Origin字段为允许跨域请求的源。请求时浏览器在请求头的Origin中说明请求的源，服务器收到后发现允许该源跨域请求，则会成功返回。
COSR字段介绍
（1）Access-Control-Allow-Methods
该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
（2）Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。
（3）Access-Control-Allow-Credentials
该字段与简单请求时的含义相同。
（4）Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。
