Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-03-07T09:53:14.030Z
Answers.LastActivityDate: 2022-03-07T09:53:14.030Z
Answers.UserDisplayName: joomkit
Body: <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>
  
Tags: <form><ajax><csrf>
Title: Ajax form submission forbidden error on custom plugin
ThreadText: # 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:
  
  ```
  <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)
  
  ```
  
  **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
  
  
  ---
  
  