ajax跨域

看慕课网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的跨域就不满足