CKEDITOR文件上传错误请求400错误

问题描述

我正在将ckEditor与文件浏览器（文件管理器插件）一起使用。当我配置CKeditor时，我能达到的目的是我能够浏览某个文件夹中的文件..但是，当我尝试通过该文件上传文件时，出现400错误的错误请求，可能是我需要做什么？

以下是我的代码

[HttpPost]
  CKEDITOR.replace('content_editor',{
            customConfig: '/assets/back/dist/plugins/ckeditor/config.js',"imagebrowser_listUrl" : "/webmaster/files/browser"
        });

        CKEDITOR.on('fileUploadRequest',function (evt) {
        
  var fileLoader = evt.data.fileLoader,formData = new FormData(),xhr = fileLoader.xhr;

    xhr.open( 'PUT',fileLoader.uploadUrl,true );
    formData.append( 'upload',fileLoader.file,fileLoader.fileName );
    fileLoader.xhr.send( formData );

    // Prevented the default behavior.
    evt.stop();
} );

请求处理程序C＃ASP.NET CORE 3.1

 public async Task<IActionResult> UploadFromEditor([FromForm]IFormFile upload)
        {
            if (upload.Length <= 0) return null;
            if (!upload.IsImage())
            {
                var NotimageMessage = "please choose a picture";
                dynamic Notimage = JsonConvert.DeserializeObject("{ 'uploaded': 0,'error': { 'message': \"" + NotimageMessage + "\"}}");
                return Json(Notimage);
            }

            var fileName = Guid.NewGuid() + Path.GetExtension(upload.FileName).ToLower();

            Image image = Image.FromStream(upload.OpenReadStream());
            int width = image.Width;
            int height = image.Height;
            if ((width > 750) || (height > 500))
            {
                var DimensionErrorMessage = "Custom Message for error";
                dynamic stuff = JsonConvert.DeserializeObject("{ 'uploaded': 0,'error': { 'message': \"" + DimensionErrorMessage + "\"}}");
                return Json(stuff);
            }

            if (upload.Length > 500 * 1024)
            {
                var LengthErrorMessage = "Custom Message for error";
                dynamic stuff = JsonConvert.DeserializeObject("{ 'uploaded': 0,'error': { 'message': \"" + LengthErrorMessage + "\"}}");
                return Json(stuff);
            }

            var path = Path.Combine(
                Directory.GetCurrentDirectory(),"wwwroot/uploads/images/conten_images",fileName);

            using (var stream = new FileStream(path,FileMode.Create))
            {
                upload.copyTo(stream);

            }

            var url = $"{"/uploads/images/CKEditorImages/"}{fileName}";
            var successMessage = "image is uploaded successfully";
            dynamic success = await Task.Run(() => JsonConvert.DeserializeObject("{ 'uploaded': 1,'fileName': \"" + fileName + "\",'url': \"" + url + "\",'error': { 'message': \"" + successMessage + "\"}}"));
            return Json(success);
        }

其他插件代码：

CKEDITOR.editorConfig = function( config ) {
    config.filebrowserbrowseUrl = '/assets/back/dist/ckeditor/plugins/imagebrowser/browser/browser.html'
    config.filebrowserUploadUrl = '/webmaster/files/UploadFromEditor';
    config.extraPlugins = 'filetools';
    config.extraPlugins = 'uploadimage';
    config.extraPlugins = 'popup';
    config.extraPlugins = 'imagebrowser';
    config.filebrowserUploadMethod = 'xhr';
    
    
};

请在这里帮助我

这是标题：

XHRPOSThttps://localhost:5001/webmaster/files/UploadFromEditor
[HTTP/2 400 Bad Request 73ms]

    
POST
    https://localhost:5001/webmaster/files/UploadFromEditor
Status400
Bad Request
VersionHTTP/2
Transferred85.50 KB (0 B size)

        
    content-length
        0
    date
        Tue,03 Nov 2020 09:13:50 GMT
    server
        Kestrel
    X-Firefox-Spdy
        h2
        
    Accept
        */*
    Accept-Encoding
        gzip,deflate,br
    Accept-Language
        en-US,en;q=0.5
    Connection
        keep-alive
    Content-Length
        86268
    Content-Type
        multipart/form-data; boundary=---------------------------1063707225330149515660008029
    Cookie
        .AspNetCore.Session=CfDJ8ERqQf6e11lCnNAhOo0wjyavEQJqEJ7gsv1MXMI4QwPk9Px8mznruNuZcxnmuYGnGjs1GtOWQI4DVCXYKd%2FRbNNo62%2FtopzHy%2FxaW87rvNE13QikL84JT0m32Ie1LWSZR3AkxYAE5p4U7TEpN5FccezCSMDeUR9geLW3lSjFIJD4; .AspNetCore.Antiforgery.J7MirshXchg=CfDJ8ERqQf6e11lCnNAhOo0wjyYadzIaShP7Nt-bl6orx5lTMtnVoGxw8noimjE32qvhp_f96p2Hx4_zK8hzdRIz12615ZdyisBTz6X9HPA39cgIvRTjmWmrWNcLlm4S2MvPAQrG9hofg1ANinWAOwKIyXc; ckCsrftoken=8qZ4KEfRjaBWRmI6coRoRbJrZd8DgYG18gAz86eN; .AspNetCore.Antiforgery.XfkU3LYWHPY=CfDJ8NfGIpF9PVtNgLP3wXt3ZoscmmPZ8ZskVSbYiI69p4lPZYB3mt9mFEqRuOV0Ajfi2f8NNbjcyEHtfta7RlEHTBhXdRfPonXD1sN2EIS2BvcjZCrN8sJXN4UMo_JlolirVt3VIcCTm-wGAtIzGq0150w
    Host
        localhost:5001
    Origin
        https://localhost:5001
    Referer
        https://localhost:5001/webmaster/News/Create
    TE
        Trailers
    User-Agent
        Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0
    X-Requested-With
        XMLHttpRequest

Cookie “.AspNetCore.Antiforgery.XfkU3LYWHPY” will be soon treated as cross-site cookie against “https://localhost:5001/webmaster/files/UploadFromEditor” because the scheme does not match. UploadFromEditor
Source map error: Error: request Failed with status 404
Resource URL: https://localhost:5001/assets/back/dist/bootstrap/js/bootstrap.min.js
Source Map URL: bootstrap.min.js.map

解决方法

根据有关测试请求的详细信息，您似乎已配置并启用了防伪令牌验证。如果JavaScript客户端未在请求中设置/包含令牌，则将导致400错误请求错误。

要解决此问题，正如我在评论中提到的，我们可以将IgnoreAntiforgeryToken属性应用于操作方法UploadFromEditor，以跳过防伪令牌验证。

或在请求标头中设置令牌，以使请求可以通过防伪令牌验证。

https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-3.1#javascript