CSRF 令牌 & JavaScript

当构建由 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" >的值，所以应该在模板文件里面加上 <meta name="csrf-token" content="{{ 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);
	}
});

 

转载于:https://www.cnblogs.com/imike/p/10637438.html