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

Question

I am trying to implement an POST call using jQuery. When i am submitting the call, it is throwing 400 Bad Request.. Not sure where i am doing wrong in my POST call.. Need help in fixing this please.. Everything seems to be in scope.

The submit Button within the Twig View.

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

The Script

<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>

The Route

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

Can anyone help me with this?

MINIMAL EXAMPLE

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令牌