使用Slim 3和Twig在jQuery帖子上獲得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令牌