vue使用axios跨域请求并接收respone返回header参数

最近开发一个前端使用vue渲染的项目，使用axios跨域请求，遇到很多坑。

跨域请求

  服务器端开启跨域请求权限  php代码为例 

header('Access-Control-Allow-Origin: *');
// 允许请求方式         * 选配
// header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE');

开启跨域请求权限后，请求就可以发送成功了。

获取token

但是要使用user_token 登录验证，需要一下配置

// 允许输出请求头 header
header('Access-Control-Expose-Headers: Authorization');
// 允许请求头 header 
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

axios跨域请求是会发送两次请求，一次options预检请求，一次实际请求，以下配置可以设置预检请求的最大周期

// 请求检测最大周期
header('Access-Control-Max-Age: 86400');

完整配置

// 允许输出请求头 header
header('Access-Control-Expose-Headers: authorization,Authorization');
// 输出 content-type
header('Content-type: application/json;charset=utf-8'); 
// 允许跨域请求
header('Access-Control-Allow-Origin: *');
// 允许请求头 header
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
// 允许请求方式
// header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE');
// 请求检测最大周期
header('Access-Control-Max-Age: 86400');
// 携带Authorization
header('Authorization:'.$user_token);

* 其他配置方式参数类似，也可以在服务器端直接配置

配置完成。