第一部分：前端为什么要使用axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
根据一系列搜索后，据别人吹水说axios性能会比jquery…其他请求框架要好，最重要的是它支持过滤器功能。方便前端分离项目使用。

1
2
# 当然想了解更多axios请戳这里：
http://axios-js.com/zh-cn/docs/

第二部分：实战与应用

前端JS内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 添加一个请求拦截器
axios.interceptors.request.use(function (config) {		  
 // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
 // 如果请求话费了超过 `timeout` 的时间，请求将被中断
 config.timeout = 20000;		 
 // 在请求发送前做的操作
 var token = getToken();
 if (token) {
    config.headers['TOKEN-AUTH'] = token;
 }
 return config;  
}, function (error) {
 // Do something with response error
 return Promise.reject(error);
});
 
// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
 // Do something with response data
 return response;
}, function (error) {
 // Do something with response error
 return Promise.reject(error);
});

Nginx跨越请求配置

1
2
3
4
5
6
7
8
9
10
11
location / {
    add_header 'Access-Control-Allow-Headers' '其他省略,TOKEN-AUTH';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';

    #其他省略
    #1、说明 Access-Control-Allow-Methods 需要添加 OPTIONS,为什么需要添加OPTIONS呢？
    #2、说明 为什么我发起的请求有两个，一个请求类型OPTIONS，另外一个才是我正常请求呢？
    # 可以参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS    
    #3、说明 Access-Control-Allow-Headers 需要添加 TOKEN-AUTH, 为了后端服务接口可以拿到前端传输的值。

}