看慕课网ajax课程小做了一下笔记，具体如下
为什么会发生跨域？
浏览器限制
有时候请求返回200，但是还是报跨域error，就是因为浏览器做了安全限制跨域（协议、域名、端口任意不同引起）
发出的请求是xhr（xmlHttpRequest）类型
发出的如果不是xhr请求，就算有跨域问题也不会报错（比如静态资源）
这三个原因同时满足才可能引起跨域问题
解决思路
我们从引起跨域的三个原因入手
- 浏览器限制 ： 指定参数让浏览器不做限制
- 发出的请求是xhr（xmlHttpRequest）类型：改变发出请求类型为非xhr（jsonp）
- 跨域
A、被调用方修改（支持跨域） b、调用方修改（隐藏跨域—代理）
jsonp
- ajax请求中设置dataType: jsonp即可使用
- jsonp是一种前后台的约定，解析的是js代码
- jsonp通过动态创建一个script，在script中把请求发出去的，用完之后script销毁
- 普通请求的type是xhr，jsonp请求的type是script
- 普通请求返回类型是json对象（application/json），jsonp请求返回类型是js脚本（application/javascript）
- 实现方法：jsonp请求后有callback参数（eg: http://a.com?callback=xxx&_=xxx），这里的callback就是前后端的一种约定，后台发现有callback参数就知道是jsonp请求，然后就把返回的数据由json变成js，返回一个js函数，函数名是发的请求的callback的值，函数参数是原本要返回的json对象
- 前端可以通过设置jsonp: ‘callback2’来改变约定的参数，并和后端约定改变之后的参数
jsonp的弊端
- 服务器需要改动代码支持
- 只支持GET方法（script只能用GET方法），即使指定为POST，发出的也是GET
- 发送的不是xhr请求（所以不具有ajax的特性）
从调用方和被调用方更改
image.png
1、被调用方解决跨域（支持跨域）
调用方请求从浏览器发出，被调用方基于http请求关于跨域请求方面的规定，在返回头里增加字段告知自己允许跨域。
修改的是被调用方的http服务器
方法： 服务器端实现， NGINX配置，APACHE配置
2、调用方解决跨域（隐藏跨域）
请求不是从浏览器直接发出，而是从中间的http服务器转发过去（代理）
修改的是调用方的http服务器
简单请求&非简单请求
简单请求是先执行后判断
遇到跨域请求，浏览器会在请求头里增加当前域的信息字段origin，当请求返回时会判断请求头是否有允许跨域的信息，没有即报错-
非简单请求会先发送预检命令后发送真实请求
一共发出两个请求，第一个请求的Method是OPTIONS，即预检命令，当预检命令请求通过之后，第二次才把请求真正发送出去，也可以设置预检命令缓存使浏览器只发送真正的请求：
设置预检命令缓存时间
带cookie的跨域
- 当带cookie的时候，Access-Control-Allow-Origin必须是全匹配，不能是*，而且必须设置res.addHeader(“Access-Control-Allow-Credentials”, ’true')
- 带cookie的请求时，请求过程需设置xhrFields: { withCredentials: true }
- cookie是被调用方域名的cookie而不是调用方域名的cookie
所以设置跨域为*的是否满足所有跨域场景呢？，当然是no，带cookie的跨域就不满足
