<p>So the forbidden error was caused by the lack / incorrect specification of $allowAnonymous</p>
<p>added</p>
<pre><code>protected $allowAnonymous = true;
</code></pre>
<p>to my controller and on to the next step</p>

CC BY-SA 4.0
2022-03-07T09:53:14.030Z
2022-03-07T09:53:14.030Z
joomkit
<p>I am submitting form data to 3rd party api through a custom plugin using fetch.
Im setting CSRF token in form like:</p>
<pre><code>&lt;input type=&quot;hidden&quot; id=&quot;subscribe-modal-token&quot; 
name=&quot;{{ craft.app.config.general.csrfTokenName }}&quot; 
value=&quot;{{ craft.app.request.csrfToken }}&quot; data-ignored&gt;

</code></pre>
<p>I keep getting either 400 forbidden error or unable to verify submission.
Ive tried just capturing the click of the form button and posting the data too but i cant get a result. I've also tried disabling csrf in the controller with &quot; public $enableCsrfValidation = false;&quot;</p>
<p>I'm at my wits ends.</p>
<pre><code> function getSubscribeData() {

        const SubscribeEmail = document.getElementById('email').value
        const SubscribeFirstname = document.getElementById('FIRSTNAME').value
        const SubscribeLastname = document.getElementById('LASTNAME').value
        const IMPACT_ANNUALREVIEW = document.getElementById(&quot;impact&quot;).checked ? 1:0
        const NEWSLETTER = document.getElementById(&quot;newsletter&quot;).checked ? 1:0
        const FUNDINGFLASH = document.getElementById(&quot;fundingalert&quot;).checked ? 1:0
        const CSRF = document.getElementById('subscribe-modal-token').value

        console.log(CSRF)
        const subscribeData = {
            FIRSTNAME:SubscribeFirstname,
            LASTNAME: SubscribeLastname,
            email: SubscribeEmail,
            FUNDINGFLASH: FUNDINGFLASH,
            NEWSLETTER:NEWSLETTER,
            IMPACT_ANNUALREVIEW:IMPACT_ANNUALREVIEW,
            optInType: 'Single',
            emailType: 'Html',
            CRAFT_CSRF_TOKEN: CSRF
        }
        console.log(subscribeData)
        return subscribeData;
    }
</code></pre>
<pre><code> let formdata = getSubscribeData()
        let options = {
            method: 'POST',
            headers: {
                Accept: 'application/json, text-plain',
                'X-CSRF-Token': formdata.CRAFT_CSRF_TOKEN,
                'CRAFT_CSRF_TOKEN': formdata.CRAFT_CSRF_TOKEN,
            },
            body: JSON.stringify(formdata)
        };
        
        
        let url = mySiteUrl + &quot;actions/mailer-subscribe/default/subscribe&quot;
        let subscribeApplicant =  fetch(url, options)
            .then(response =&gt; response.json())
            .then(data =&gt; {
                console.log(data.status)

                if (data.status == &quot;Subscribed&quot;) {
                    console.log(&quot;success&quot;)
                    setTimeout(revertSpinSubcribeBtn, 2000)
                } else {
                    if(data.error.length &gt; 0){

                    }
                    console.log(data)
                }
            })
            .catch(err =&gt; {
                console.log('message_fail', err)
            })
        console.log(subscribeApplicant)
    }, false)

</code></pre>

<form><ajax><csrf>
Ajax form submission forbidden error on custom plugin
# Ajax form submission forbidden error on custom plugin

(Asked by: username_0 on 2022-03-06)

I am submitting form data to 3rd party api through a custom plugin using fetch.
Im setting CSRF token in form like:



I keep getting either 400 forbidden error or unable to verify submission.
Ive tried just capturing the click of the form button and posting the data too but i cant get a result. I've also tried disabling csrf in the controller with " public $enableCsrfValidation = false;"
I'm at my wits ends.
 function getSubscribeData() {

        const SubscribeEmail = document.getElementById('email').value
        const SubscribeFirstname = document.getElementById('FIRSTNAME').value
        const SubscribeLastname = document.getElementById('LASTNAME').value
        const IMPACT_ANNUALREVIEW = document.getElementById("impact").checked ? 1:0
        const NEWSLETTER = document.getElementById("newsletter").checked ? 1:0
        const FUNDINGFLASH = document.getElementById("fundingalert").checked ? 1:0
        const CSRF = document.getElementById('subscribe-modal-token').value

        console.log(CSRF)
        const subscribeData = {
            FIRSTNAME:SubscribeFirstname,
            LASTNAME: SubscribeLastname,
            email: SubscribeEmail,
            FUNDINGFLASH: FUNDINGFLASH,
            NEWSLETTER:NEWSLETTER,
            IMPACT_ANNUALREVIEW:IMPACT_ANNUALREVIEW,
            optInType: 'Single',
            emailType: 'Html',
            CRAFT_CSRF_TOKEN: CSRF
        }
        console.log(subscribeData)
        return subscribeData;
    }

 let formdata = getSubscribeData()
        let options = {
            method: 'POST',
            headers: {
                Accept: 'application/json, text-plain',
                'X-CSRF-Token': formdata.CRAFT_CSRF_TOKEN,
                'CRAFT_CSRF_TOKEN': formdata.CRAFT_CSRF_TOKEN,
            },
            body: JSON.stringify(formdata)
        };
        
        
        let url = mySiteUrl + "actions/mailer-subscribe/default/subscribe"
        let subscribeApplicant =  fetch(url, options)
            .then(response => response.json())
            .then(data => {
                console.log(data.status)

                if (data.status == "Subscribed") {
                    console.log("success")
                    setTimeout(revertSpinSubcribeBtn, 2000)
                } else {
                    if(data.error.length > 0){

                    }
                    console.log(data)
                }
            })
            .catch(err => {
                console.log('message_fail', err)
            })
        console.log(subscribeApplicant)
    }, false)

**Tags:** form, ajax, csrf


---

## 1 answers

### Answer by username_0 on 2022-03-07. Score: 1

So the forbidden error was caused by the lack / incorrect specification of $allowAnonymous
added
protected $allowAnonymous = true;

to my controller and on to the next step


---

