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

技术探讨  2018-04-28 11:03   7847 跨域请求 axios vue user_token

最近开发一个前端使用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);

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

    

配置完成。

注:本文转载自www.sandbean.com,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。

沙豆网 站长

追求卓越,奋斗不息!

167
文章
8435
点赞

更多文章