前端之ajax笔记（三）

本文由何小蒙原创，如需转载要注明来源。

个人笔记，自用，仅供参考。

跨域

跨域是前端接口请求中比较重要的点，单独开一篇记录下。

同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的文档或它加载的脚本如何能与另一个源的资源进行交互。能够减少恶意文档，减少可能被攻击媒介。如果两个URL的协议、域名、端口号都相同，就称这两个URL同源。

浏览器默认两个不同的源之间是可以互相访问资源和操作DOM的。两个不同的源之间若是想要访问资源或者操作DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。它的存在可以保护用户隐私信息，防止身份伪造。

CORS

CORS的意思是跨资源共享，用自定义的HTTP头部让浏览器和服务器商量是否能沟通，不行浏览器_{（？此处确实是浏览器，为什么不是服务器）}会驳回请求。跨域请求默认情况下不会携带cookie。
_{意思是不行这个请求就是直接没发到服务器吗？}

// request headers
Origin: https://www.baidu.com

Origin是请求端告诉服务端请求来源，如上例，这个是来自百度的请求

// response headers
Access-Control-Allow-Origin: https://www.baidu.com

Access-Control-Allow-Origin 如果服务端觉得这个来源的请求可以接受，就会返回与Origin相同的来源，如上例。如果是公共资源可以返回 *

_更新
_{1.确实是浏览器驳回跨域请求，服务器不会做处理}
_{2.跨域请求可能会发送到服务器，也可能不会发送到服务器：}
_{简单请求（会到服务器，服务器返回到浏览器后，浏览器隐藏返回值）}
_{复杂请求（复杂请求会发预检，预检不通过就不会到服务器}

Preflighted Request

预检请求，Preflighted Request是一种验证机制：用于验证开发人员使用自定义头部、GET或POST之外的方法，以及不同类型的主体内容。
发送预检请求，使用的是OPTION方法。

整个过程就是
请求端：我这有个麻烦的请求，先用OPTION方法问下你能不能请求啊？
服务器老弟：行，咱返回这些值告诉你。
a.不允许请求
请求端：哟，不允许请求，请求结果缓存下，Access-Control-Max-Age时间内不用重新问了。
b.允许请求
请求端：直接发送到服务端

请求端先发送这个，用OPTION方法

Origin: https://www.baidu.com
Access-Control-Request-Methods: POST 
Access-Control-Request-Headers: HeXM

Access-Control-Request-Methods是请求使用的方法
Access-Control-Request-Headers是自定义的头部信息
服务端返回

Access-Control-Allow-Orgin: https://www.baidu.com
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: HXM
Access-Control-Max-Age: 1000000

Access-Control-Allow-Methods服务器允许请求的方法
Access-Control-Allow-Headers服务器允许请求的头部
Access-Control-Max-Age应该将此预检请求缓存多少秒

OPTION.png

cookie

上文说cookie是跨域请求默认不会携带的，其实除了cookie，HTTP认证，SSL证明也是默认不会带上的。但是总有些情况需要携带，那咋办呢？

通过如下设置，我们就可以携带上述这些东西了
在请求端：

xhr.withCredentials = true

服务端HTTP头部设置：

Access-Control-Allow-Origin: 此处不能设置为*，必须要和请求同源
Access-Control-Allow-Credentials: true

如果服务端不设置Access-Control-Allow-Credentials，那么浏览器的返回值就是空，status为0，走error()的处理方法。
预检也可以发这个头部，告诉服务器咱们可以带cookie。
IE10以上的版本不支持withCredentials属性。

JSONP

老实说，我觉得JSONP使用场景比较受限，因为它只接受GET请求，但实际业务场景只用GET请求的很少，基本至少都要用到POST吧。而且如果跨的域名不安全，返回过来的信息可能也不安全。不过既然有这个技术，咱也简单了解下。

JSONP不是语法，是json的一种使用方法。

callback({"name": "HeXM"})

请求时指定回调函数的命名，如下例：
https://www.test.com/json?callback=handle
handle即为回调函数命名
然后数据会传到这个回调函数，接着前端在