ajax跨域请求处理及header自定义设置

最近做了一个应用管理系统，采用前后端分离方式开发，前端使用了layuiadmin框架，后端使用了 .net web api，在开发过程中，遇到了ajax跨域问题及header自定义设置，这是所有前后端分离开发都需要解决的问题，在此做一个记录。

在前端ajax请求时，我们在header中设置了自定义的头部信息，将token写入了头部，便于后端进行身份认证， 如：xhr.setRequestHeader("Authorization", access_token)。通过了ajax全局方法做了统一处理。

在设置了自定义header后，浏览器到后端请求将分为两步进行。

浏览器将先发送一个预请求OPTIONS到后端，这里后端需要对OPTIONS请求做出正确响应，可以直接返回200状态码，不用返回内容信息。

浏览器接收到OPTIONS正确响应后会自动执行发送get或post请求。可此时依旧没有请求到后端数据，F12查看控制台输出，会发现报错了。这就是接下来要处理的跨域问题。

跨域的处理主要是服务器端设置响应头，针对.net web api 可直接在web.config文件中的<system.webServer>节点中进行设置，如图：

Access-Control-Allow-Origin //支持全域名访问，不安全，部署后需要固定限制为客户端网址

Access-Control-Allow-Methods //支持的http 动作

Access-Control-Allow-Headers //响应头 请按照自己需求添加

设置完成后，前端在chrome下调用api接口能正常相应，但在IE下依旧报错，如图：

最终发现，我们自定义设置了Authorization，在IE下，后端并没有给出相应的响应，原以为Access-Control-Allow-Headers设置为*，就能表示所有的响应头，但在IE下不行，需要将自己对应的需求以此设置。如图

设置完后，就可成功访问后端api。

由于HTTP无状态协议，有时需要保存资源状态信息或者用户信息，根据状态判断是否需要重新请求资源或者在相同域名和端口下读取用户信息。

缓存可以使浏览器重用已获取的资源和保存用户信息，优化静态资源的加载速度以及加速页面的渲染速度。

缓存包括很多方面，这里仅简要介绍下数据缓存Cookie及相关设置和浏览器header缓存匹配策略(ETag, Cache-Control)

一般Cookie是由首次请求时, 服务器在HTTP的响应头通过Set-Cookie给客户端的一串字符串及metadata，比如用户信息或资源状态信息或对缓存的控制信息等，浏览器收到响应后，会将Cookie保存在客户端一段时间，然后客户端每次访问的相同域名的网页时，浏览器会按照一定的原则(浏览器缓存策略)将Cookie发送给服务器。

Cookie的内容主要包括：名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围

注意 ：

早期HTTP /1.0中则通过服务器在Header中Set-Cookie设置 Expires 来实现缓存控制，表示资源到什么时候过期(绝对时间)，一旦修改本地时间，可能造成缓存失效。

早期HTTP /1.0使用首次响应返回Last-Modified，接下来请求头加上If-Modified-Since来实现协商缓存，相比ETag基于内容是否变更，其是否刷新缓存是通过修改时间是否变更来判断。有以下缺点：

若两者同时使用，则ETag优先级比Last Modified要高

注意：

---