Php TinyMCE和Laravel 5.3令牌不匹配异常
我试图在服务器端使用Laravel 5.3实现TinyMCE图像上传: 这是我的TinyMCE JS,它目前在刀片模板中:Php TinyMCE和Laravel 5.3令牌不匹配异常,php,laravel-5,tinymce,csrf,tinymce-4,Php,Laravel 5,Tinymce,Csrf,Tinymce 4,我试图在服务器端使用Laravel 5.3实现TinyMCE图像上传: 这是我的TinyMCE JS,它目前在刀片模板中: <script src="{{ URL::to("/tinymce/tinymce.min.js") }}"></script> <script> tinymce.init({ selector: 'textarea', plugins: [ "advlist autolin
<script src="{{ URL::to("/tinymce/tinymce.min.js") }}"></script>
<script>
tinymce.init({
selector: 'textarea',
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
relative_urls: false,
image_title: true,
automatic_uploads: true,
images_upload_url: '/discussions/save_images/',
file_picker_types: 'image',
images_upload_credentials: true,
file_picker_callback: function(cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function() {
var file = this.files[0];
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var blobInfo = blobCache.create(id, file);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), { title: file.name });
};
input.click();
}
});
</script>
我处理每次上载的操作:
public function saveImages(Request $request) {
$filename = sha1(uniqid()).'.'.request()->file("name")->getClientOriginalExtension();
$request->file("name")->move('/images/discussions/', $filename);
return json_encode(["location"=>"/images/discussions/".$filename]);
}
Laravel抛出一个令牌失配异常。如何将CSRF令牌传递到TinyMCE发出的POST请求中
我知道,通常可以通过
{{csrf\u token}}
在模板中访问此令牌,但我不确定TinyMCE的正确配置。使用images\u upload\u处理程序进行自定义处理,并在请求头中设置X-csrf-token是有效的。下面是完整的JS代码最终的样子:
tinymce.init({
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
selector: 'textarea',
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/discussions/save_images');
var token = document.getElementById("_token").value;
xhr.setRequestHeader("X-CSRF-Token", token);
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
},
file_picker_callback: function(cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function() {
var file = this.files[0];
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var blobInfo = blobCache.create(id, file);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), { title: file.name });
};
input.click();
}
});
使用jquery,您可以使用以下代码将csrf令牌添加到任何xhr请求中:
$.ajaxPrefilter(function (options, originalOptions, xhr) {
var token = '{{ csrf_token() }}';
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
});
看起来是一个很好的解决方案,但是没有添加标题。
$.ajaxPrefilter(function (options, originalOptions, xhr) {
var token = '{{ csrf_token() }}';
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
});