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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值