Ajax form submission forbidden error on custom plugin

Question

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

<input type="hidden" id="subscribe-modal-token" 
name="{{ craft.app.config.general.csrfTokenName }}" 
value="{{ craft.app.request.csrfToken }}" data-ignored>

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)

Answer 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