Answers.Body: <p>Thanks to <strong>Robin Schambach</strong>. The answer was as simple as serialize the form data with the CSRF in there already by using the default <code>{{ getCsrfInput() }}</code></p>
  
  <blockquote>
    <p>serializeArray won't produce data in a way Craft CMS will proceed it.
    It's not a good idea to do that. Besides that why don't you include
    the token in your form from the beginning? Because this is never the
    default code you can find in every ajax request – <em>Robin Schambach 14
    hours ago</em></p>
  </blockquote>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-24T07:46:48.153Z
Answers.LastActivityDate: 2018-08-24T07:46:48.153Z
Answers.UserDisplayName: Tom De Smet
Body: <p>I have quite a simple registration form, something like this:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          window.csrfTokenName = "{{ craft.config.get('csrfTokenName') }}";
          window.csrfTokenValue = "{{ craft.request.getCsrfToken }}";
      &lt;/script&gt;
  
      &lt;form id="registerUser" method="post" accept-charset="UTF-8" class="flex-stack" novalidate @submit.prevent="userFormValidation()"&gt;
                          &lt;input type="hidden" name="action" value="users/saveUser"&gt;
                          &lt;input type="hidden" name="redirect" value="user/registration-success"&gt;
  
                          &lt;label for="username"&gt;{{ "Username (no spaces)"|t }} &lt;em&gt;*&lt;/em&gt;&lt;/label&gt;
                          &lt;input id="username" type="text" name="username" v-model.lazy.trim="user.userDetails.userName" :class="{ 'error-field': usernameHasError }" required&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>It gets passed to VueJS (which works). There I have the default code I find in every AJAX post on Craft StackExchange:</p>
  
  <pre><code>var data = $('#registerUser').serializeArray();
  
              //--- Add CSRF token to data
              data[window.csrfTokenName] = window.csrfTokenValue;
  
              $.ajax({
                  type: "POST",
                  data: data,
                  url: "",
                  success: function(data, response){
                      console.log("success", response, data);
                  },
                  error: function(response) {
                      console.log("error", response);
                  }
              });
  </code></pre>
  
  <p>This works when the CSRF is disabled in the config, but when enabled, I always get a <strong>bad request, CSRF token invalid error</strong>.</p>
  
  <p>What am I doing wrong here? There's no Craft caching going on.</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-08-23T17:06:03.500Z
Comments.Text: `serializeArray` won't produce data in a way Craft CMS will proceed it. It's not a good idea to do that. Besides that why don't you include the token in your form from the beginning? Because this is never the default code you can find in every ajax request
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-08-23T21:48:36.797Z
Comments.Text: But using the {{ getCsrfInput() }} in my form doesn't work with Ajax right? All I read on SE is by doing it the way I do it. But I can't add it to the data when I use serialize() instead. What does craft expect to get from a post Ajax to work with anyway? Any good examples I didn't find that you know of?
Comments.UserDisplayName: Tom De Smet
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-08-23T21:50:18.480Z
Comments.Text: Of course it works with ajax, why shouldn't it? You can't add it to the data because you are not supposed to do that. Just include the value to the form, serialize it and submit it
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-08-24T07:43:27.197Z
Comments.Text: Thanks man, it just works now. I don't know why all these other threads have the wrong answers. It's so simple...
Comments.UserDisplayName: Tom De Smet
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-08-24T07:45:13.537Z
Comments.Text: These answers are not wrong, you just used them wrong. Most other answers around here are about submitting custom data via ajax not about submitting serialized forms. So it's not their fault
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-08-24T07:49:42.243Z
Comments.Text: Just revisited some of those threads and I can see now where I made my wrong assumptions.
Comments.UserDisplayName: Tom De Smet
Tags: <form><ajax><csrf>
Title: Another AJAX CSRF question
ThreadText: # Another AJAX CSRF question
  
  (Asked by: username_0 on 2018-08-23)
  
  I have quite a simple registration form, something like this:
  
  ```
      <script type="text/javascript">
          window.csrfTokenName = "{{ craft.config.get('csrfTokenName') }}";
          window.csrfTokenValue = "{{ craft.request.getCsrfToken }}";
      </script>
  
      <form id="registerUser" method="post" accept-charset="UTF-8" class="flex-stack" novalidate @submit.prevent="userFormValidation()">
                          <input type="hidden" name="action" value="users/saveUser">
                          <input type="hidden" name="redirect" value="user/registration-success">
  
                          <label for="username">{{ "Username (no spaces)"|t }} <em>*</em></label>
                          <input id="username" type="text" name="username" v-model.lazy.trim="user.userDetails.userName" :class="{ 'error-field': usernameHasError }" required>
      </form>
  
  ```
  
  It gets passed to VueJS (which works). There I have the default code I find in every AJAX post on Craft StackExchange:
  
  ```
  var data = $('#registerUser').serializeArray();
  
              //--- Add CSRF token to data
              data[window.csrfTokenName] = window.csrfTokenValue;
  
              $.ajax({
                  type: "POST",
                  data: data,
                  url: "",
                  success: function(data, response){
                      console.log("success", response, data);
                  },
                  error: function(response) {
                      console.log("error", response);
                  }
              });
  
  ```
  
  This works when the CSRF is disabled in the config, but when enabled, I always get a **bad request, CSRF token invalid error**.
  
  What am I doing wrong here? There's no Craft caching going on.
  
  **Tags:** form, ajax, csrf
  
  > **Comments:**
  > **username_1**: `serializeArray` won't produce data in a way Craft CMS will proceed it. It's not a good idea to do that. Besides that why don't you include the token in your form from the beginning? Because this is never the default code you can find in every ajax request  
  > **username_0**: But using the {{ getCsrfInput() }} in my form doesn't work with Ajax right? All I read on SE is by doing it the way I do it. But I can't add it to the data when I use serialize() instead. What does craft expect to get from a post Ajax to work with anyway? Any good examples I didn't find that you know of?  
  > **username_1**: Of course it works with ajax, why shouldn't it? You can't add it to the data because you are not supposed to do that. Just include the value to the form, serialize it and submit it  
  > **username_0**: Thanks man, it just works now. I don't know why all these other threads have the wrong answers. It's so simple...  
  > **username_1**: These answers are not wrong, you just used them wrong. Most other answers around here are about submitting custom data via ajax not about submitting serialized forms. So it's not their fault  
  > **username_0**: Just revisited some of those threads and I can see now where I made my wrong assumptions.  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2018-08-24. Score: 1 | Accepted answer
  
  Thanks to **username_1 username_1**. The answer was as simple as serialize the form data with the CSRF in there already by using the default `{{ getCsrfInput() }}`
  
  > serializeArray won't produce data in a way Craft CMS will proceed it.
  > It's not a good idea to do that. Besides that why don't you include
  > the token in your form from the beginning? Because this is never the
  > default code you can find in every ajax request – *username_1 username_1 14
  > hours ago*
  
  
  ---
  
  