Laravel+vue (axios) 上传图片时报错:CSRF token mismatch.

感谢大家关注这个问题!
一开始这个报错,经过百度后用了这个方法:
1、在index.html的head中添加

<meta name="csrf-token" content="{{ csrf_token() }}" />

2、js:

let config = {
    headers:{
    'Content-Type':'application/json;charset=UTF-8',
    'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
     'X-Requested-With': 'XMLHttpRequest'
    }
};
axios.post('/api/upload_avatar',{data:img},config)
     .then(response=>{
    that.avatar = 'http://***.com/api/'+response.data;
 });

还是报错:CSRF token mismatch.
打印了一下

document.querySelector('meta[name="csrf-token"]').getAttribute('content')

发现结果直接就是字符串{{ csrf_token() }}:disappointed_relieved:

《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
最佳答案
  • {{ csrf_token() }} 这个是 blade 模板语法,你这个是 index.html,行不通的
  • axios 默认会从 cookie 中读取 XSRF-TOKEN 值,设置 X-XSRF-TOKEN header。

解决问题,尽量把不明白的知识点都弄明白,找到问题的本质,不是病急乱投医。少用百度。。。

4年前 评论
讨论数量: 3
  • {{ csrf_token() }} 这个是 blade 模板语法,你这个是 index.html,行不通的
  • axios 默认会从 cookie 中读取 XSRF-TOKEN 值,设置 X-XSRF-TOKEN header。

解决问题,尽量把不明白的知识点都弄明白,找到问题的本质,不是病急乱投医。少用百度。。。

4年前 评论

@Hachiko 谢谢谢谢!我刚刚把这个接口放到api.php就可以访问了。

4年前 评论
Hachiko 4年前

我把接口放回web.php,发现原因是有时候有XSRF-TOKEN的Cookie,不会报错,有时候又没有,会报419.。。

4年前 评论
Hachiko 4年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!