使用 dropzone JS 上传图像时出现“无法验证 CSRF 令牌真实性”和“422”错误的原因是什么？

如何解决使用 dropzone JS 上传图像时出现“无法验证 CSRF 令牌真实性”和“422”错误的原因是什么？

在应用程序上工作了几个月，几乎没有模型接受使用 ActiveStorage 使用 dropzone JS 上传图像，并且我无法再使用 dropzone 上传图像。我知道我在整个应用程序中更改的唯一一件事是将视图引擎从 ERB 更改为 HAML。这会导致问题吗。？

我花了几个小时寻找解决方案，但没有任何效果。这是我尝试上传图片时出现的应用错误。

Error creating Blob for "image_name.jpg". Status: 422

这里是终端日志：

Started GET "/rails/active_storage/disk/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDVG9JYTJWNVNTSWhkemx3TjNKMU5teDNhRzQxYzI1bU9YWnBZM1ZzTVRCMk1ua3hOUVk2QmtWVU9oQmthWE53YjNOcGRHbHZia2tpQVl4cGJteHBibVU3SUdacGJHVnVZVzFsUFNJeU1ESXdNRFV3TmpFNE1URXhPUzA1TW1NNU9HRmpaV1ExTW1SaE56UXlZelkyWldWbU4yUTFZMlV6TkdabU55NXFjR2NpT3lCbWFXeGxibUZ0WlNvOVZWUkdMVGduSnpJd01qQXdOVEEyTVRneE1URTVMVGt5WXprNFlXTmxaRFV5WkdFM05ESmpOalpsWldZM1pEVmpaVE0wWm1ZM0xtcHdad1k3QmxRNkVXTnZiblJsYm5SZmRIbHdaVWtpRDJsdFlXZGxMMnB3WldjR093WlVPaEZ6WlhKMmFXTmxYMjVoYldVNkNteHZZMkZzIiwiZXhwIjoiMjAyMS0wMy0yNlQxOTo1Nzo0MS4yMDRaIiwicHVyIjoiYmxvYl9rZXkifX0=--45a242e52828942cb9933781663d53482286244d/20200506181119-92c98aced52da742c66eef7d5ce34ff7.jpg" for ::1 at 2021-03-26 23:52:42 +0400


Processing by ActiveStorage::DiskController#show as JPEG
Parameters: {"encoded_key"=>"[FILTERED]","filename"=>"20200506181119-92c98aced52da742c66eef7d5ce34ff7"}
Completed 200 OK in 1ms (ActiveRecord: 0.0ms | Allocations: 471)

Started POST "/rails/active_storage/direct_uploads" for ::1 at 2021-03-27 05:21:48 +0400
Processing by ActiveStorage::DirectUploadsController#create as JSON
Parameters: {"blob"=>{"filename"=>"88a04c2e5f589fcebda2641d00b8427f.jpg","content_type"=>"image/jpeg","byte_size"=>511762,"checksum"=>"y/nNLQR9mGaB5haUie2M5Q=="},"direct_upload"=>{"blob"=>{"filename"=>"88a04c2e5f589fcebda2641d00b8427f.jpg","checksum"=>"y/nNLQR9mGaB5haUie2M5Q=="}}}


Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity in 2ms (ActiveRecord: 0.0ms | Allocations: 1029)


ActionController::InvalidAuthenticityToken - ActionController::InvalidAuthenticityToken:

我使用的是 Rails6 和 ruby​​ 3。现阶段不涉及调用 API。我注意到使用 dropzone JS 上传图像会导致此问题。没有 dropzone JS 的上传工作正常。可能是什么原因？

这是控制台错误：

dropzone.js:8185 Uncaught TypeError: Cannot read property 'apply' of undefined
        at Dropzone.emit (dropzone.js:8185)
        at dropzone.js:10197
        at dropzone.js:10423
        at loadExif (dropzone.js:10346)
        at HTMLImageElement.img.onload (dropzone.js:10357)
    emit @ dropzone.js:8185
    (anonymous) @ dropzone.js:10197
    (anonymous) @ dropzone.js:10423
    loadExif @ dropzone.js:10346
    img.onload @ dropzone.js:10357
    load (async)
    createThumbnailFromUrl @ dropzone.js:10344
    fileReader.onload @ dropzone.js:10294
    load (async)
    createThumbnail @ dropzone.js:10283
    _processThumbnailQueue @ dropzone.js:10196
    (anonymous) @ dropzone.js:10179
    setTimeout (async)
    _enqueueThumbnail @ dropzone.js:10178
    addFile @ dropzone.js:10113
    (anonymous) @ dropzone.js:9533
    activestorage.js:739 POST 

http://localhost:5000/rails/active_storage/direct_uploads 422 (Unprocessable Entity)
    create @ activestorage.js:739
    (anonymous) @ activestorage.js:873
    fileReaderDidLoad @ activestorage.js:620
    (anonymous) @ activestorage.js:605
    load (async)
    create @ activestorage.js:604
    create @ activestorage.js:584
    create @ activestorage.js:865
    start @ dropzone_controller.js:93
    (anonymous) @ dropzone_controller.js:31
    setTimeout (async)
    (anonymous) @ dropzone_controller.js:30
    emit @ dropzone.js:8185
    addFile @ dropzone.js:10111
    (anonymous) @ dropzone.js:9533

更新

这是我的 dropzone_controller.js 文件与刺激

import { Controller } from "stimulus";
import Dropzone from "dropzone";
import "dropzone/dist/min/dropzone.min.css";
import "dropzone/dist/min/basic.min.css";
import { DirectUpload } from "@rails/activestorage";

export default class extends Controller {
    static targets = ["input"];

    connect() {
        Dropzone.autoDiscover = false;
        this.inputTarget.disable = true;
        this.inputTarget.style.display = "none";
        const dropzone = new Dropzone(this.element,{
            url: "/",maxFiles: "10",maxFilesize: "10",});


        dropzone.on("addedfile",(file) => {
            setTimeout(() => {
                if (file.accepted) {
                    const upload = new DirectUpload(file,this.url);
                    upload.create((error,attributes) => {
                        this.hiddenInput = document.createElement("input");
                        this.hiddenInput.type = "hidden";
                        this.hiddenInput.name = this.inputTarget.name;
                        this.hiddenInput.value = attributes.signed_id; << error here
                        this.inputTarget.parentNode.insertBefore(
                            this.hiddenInput,this.inputTarget.nextSibling
                        );
                        dropzone.emit("success",file);
                        dropzone.emit("complete",file);
                    });
                }
            },500);
        });
    }

    get url() {
        return this.inputTarget.getAttribute("data-direct-upload-url");
    }
}

当我尝试上传图像时，出现与 blob 相关的错误。 Uncaught TypeError: can't access property "signed_id",blob is undefined