使用 Slim 3 和 Twig 在 jQuery post 上获得 400（错误请求）

Question

我正在尝试使用 jQuery 实现 POST 调用。当我提交呼叫时，它抛出 400 Bad Request.. 不确定我在 POST 呼叫中哪里做错了.. 需要帮助解决这个问题.. 一切似乎都在范围内。

Twig 视图中的提交按钮。

<button type="submit" id="accent">CONFIRM ACCENT COLOUR</button>

剧本

<script type="text/javascript" src="{{ base_url() }}/assets/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{ base_url() }}/assets/plugins/fpd/js/fabric.js"></script>
<script type="text/javascript" src="{{ base_url() }}/assets/plugins/fpd/js/FancyProductDesigner-all.js"></script>
<script type="text/javascript" src="{{ base_url() }}/assets/plugins/fpd/js/FancyProductDesignerPlus.js"></script>

<script type="text/javascript">
    var _container = jQuery('#fpd');
    var _accent = jQuery('#accent');

    var _pluginOpts = {
        stageWidth: 800,
        stageHeight: 800, 
        editorMode: false,
        mainBarModules: ['images', 'text'],
        actions: {
            "top": ['preview-lightbox', 'zoom'],
            "right": [],
            "bottom": [],
            "left": []
        }, 
        toolbarPlacement: 'inside-bottom',
        fonts: ['Arial', 'Helvetica', 'Times New Roman', 'Verdana', 'Geneva', 'Gorditas'],
        colorSelectionPlacement: 'inside-bl',
        customImageParameters: {
            uniScalingUnlockable: true,
            colors: ['#000000', '#e6dcc1', '#b6a287', '#fdf6ae', '#ffd54b', '#f68a40', '#a9d489', '#217342', '#39401f', '#c62127', '#e85d82', '#ebc5e9', '#f3dfe4', '#b8d9e6', '#3970b7', '#263b97', '#9295ca', '#261c4e', '#0d0e22', '#bbbbb6', '#5b5d5a', '#ffffff'],
            removable: true,
            resizable: true,
            draggable: true,
            rotatable: true,
            autoCenter: true
        },
        customTextParameters: {
            curvable: true,
            curveReverse: true,
            curveSpacing: 0,
            curveRadius: 200,
            fontSize: 50,
            colors: ['#000000', '#e6dcc1', '#b6a287', '#fdf6ae', '#ffd54b', '#f68a40', '#a9d489', '#217342', '#39401f', '#c62127', '#e85d82', '#ebc5e9', '#f3dfe4', '#b8d9e6', '#3970b7', '#263b97', '#9295ca', '#261c4e', '#0d0e22', '#bbbbb6', '#5b5d5a', '#ffffff'],
            removable: true,
            resizable: true,
            draggable: true,
            rotatable: true,
            autoCenter: true
        },
    },

    fpd = new FancyProductDesigner(_container, _pluginOpts);

    jQuery(function() { 
        _accent.click(function() {
            fpd.getProductDataURL(function(dataURL) {
                //** SOURCE CODE FOR URL IS CORRECT var url = "/projects/GolfBag/public/golf-bags/2563901"; **//
                var url = "{{ path_for('product.createProductAccent', {sku: product.sku}) }}";

                //** HERE SEEMS TO BE THE ISSUE **//

                jQuery.post(url, {accent: 'accent', contentType: 'image/png', base64_image: dataURL});
            });
        });
    });
</script>

路线

$app->post('/golf-bags/{sku}', ['Base\Controllers\ProductController', 'createProductAccent'])->setName('product.createProductAccent');

谁能帮我解决这个问题？

最小的例子

jQuery(function() { 
    _accent.click(function() {
        fpd.getProductDataURL(function(dataURL) {
            //** SOURCE CODE FOR URL IS CORRECT var url = "/projects/GolfBag/public/golf-bags/2563901"; **//
            var url = "{{ path_for('product.createProductAccent', {sku: product.sku}) }}";

            //** HERE SEEMS TO BE THE ISSUE **//

            jQuery.post(url, {accent: 'accent', contentType: 'image/png', base64_image: dataURL});
        });
    });
});

Answer 1

经过一番挖掘，我发现问题是 CSRF 令牌未应用于 post

使用 Slim 3 和 Twig 在 jQuery post 上获得 400（错误请求）

Getting 400 (Bad Request) on jQuery post with Slim 3 and Twig

javascript

jquery

twig

slim-3