当构建由 JavaScript 驱动的应用时,可以方便地让 JavaScript HTTP 函数库发起每一个请求时自动附上 CSRF 令牌。默认情况下, resources/js/bootstrap.js
文件会用 Axios HTTP 函数库注册的 csrf-token
meta 标签中的值。如果你不使用这个函数库,你需要手动为你的应用配置此行为。
从bootstrap.js
中的以下代码片段可以看出,当使用 Axios HTTP函数库作为请求时,CSRF 令牌会自动传入 X-CSRF-TOKEN
请求头。 如果你不是用 Axios 作为 HTTP 请求库的话(比如用 jQuery),那么就需要你手动配置了。
/** * Next we will register the CSRF Token as a common header with Axios so that * all outgoing HTTP requests automatically have it attached. This is just * a simple convenience so we don't have to attach every token manually. */let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
其中 document.head.querySelector('meta[name="csrf-token"]'); 会读取 <meta name="csrf-token" >的值,所以应该在模板文件里面加上 标签。
值得注意的是:当不是用 Axios 作为 HTTP 请求库的话,比如用 jQuery 那么通过Axios自动附上 CSRF 令牌是无效的,需要我们手动设置headers参数将 CSRF 令牌传递给服务器,如:
$.ajax({
url: "{{ route('post') }}", //处理页
type:"POST",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
dataType: "json",
data: { title: "标题内容", body: "主要内容"},
success: function(result,status,xhr){
alert("~成功~,返回结果:" + result.message + ",返回状态:"+status+",xhr:"+xhr.responseText + ",status: " + xhr.status + ",responseJSON: " + xhr.responseJSON);
},
error: function(xhr,status,error){
alert("~失败~, xhr: " + xhr.responseText + ",返回状态:" + status + ",错误:" + error + ",status: " + xhr.status + ",responseJSON: " + xhr.responseJSON);
}
});