Answers.Body: <p>The problem was resolved by changing the headers set:</p>
  
  <pre><code>let form = new FormData(this.form);
  let request = new Request('/', {
    credentials: 'include',
    method: 'post',
    mode: 'same-origin',
    redirect: 'follow',
    headers: new Headers({
      'Accept': '*/*',
      'X-Requested-With': 'XMLHttpRequest'
    }),
    body: form
  });
  </code></pre>
  
  <p>Instead of declaring the Content-Type in the request, I set the encoding type on the form itself, this step is optional as the request sets as multipart/form data by default I think.</p>
  
  <pre><code>&lt;form method="post" enctype="multipart/form-data"&gt;
  ..
  &lt;/form&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-11T12:27:31.873Z
Answers.LastActivityDate: 2017-09-11T12:27:31.873Z
Answers.UserDisplayName: Jai Sandhu
Answers.Body: <p>As mentioned on Twitter, pretty sure this we will be an issue with CSRF ... Get it working first with that turned off is my advice. I have not used Fetch, though.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-11T10:49:37.923Z
Answers.LastActivityDate: 2017-09-11T10:49:37.923Z
Answers.UserDisplayName: Jeremy Daalder
Body: <p>Hi this is a variation of the question asked here <a href="https://craftcms.stackexchange.com/questions/17347/update-commerce-cart-using-ajax">on updating the cart using ajax</a>, instead I'm attempting to use the Fetch API. As a test the form submits properly when submitting in the usual way without using the Fetch request. I've attempted to replicate the synchronous request header that I inspected in the Chrome Network tab but I still get a Bad Request error. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form method="POST" id="addToCartForm"&gt;
      {{ getCsrfInput() }}
      &lt;input type="hidden" name="action" value="commerce/cart/updateCart"&gt;
      &lt;input type="hidden" name="redirect" value="/cart"&gt;
      &lt;input type="hidden" name="purchasableId" value="{{ product.id }}"&gt;
      &lt;input type="number" name="qty"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>let formElem = document.getElementById('addToCartForm');
  let form = new FormData(formElem);
  let request = new Request('/', {
    credentials: 'include',
    method: 'post',
    mode: 'same-origin',
    redirect: 'follow',
    headers: new Headers({
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
      'X-Requested-With': 'XMLHttpRequest' // so craft detects ajax
    }),
    body: form
  });
  
  fetch(request).then((response) =&gt; {
    if(response.ok) {
      return response.text();
    }
    throw new Error('Network response was not ok.');
  }).then((response) =&gt; {
    console.log('Worked:');
    console.log(response);
  }).catch((error) =&gt; {
    console.log(error);
  });
  </code></pre>
  
Tags: <plugin-craftcommerce><ajax><javascript>
Title: Update Commerce Cart using Fetch
ThreadText: # Update Commerce Cart using Fetch
  
  (Asked by: username_0 on 2017-09-10)
  
  Hi this is a variation of the question asked here [on updating the cart using ajax](https://craftcms.stackexchange.com/questions/17347/update-commerce-cart-using-ajax), instead I'm attempting to use the Fetch API. As a test the form submits properly when submitting in the usual way without using the Fetch request. I've attempted to replicate the synchronous request header that I inspected in the Chrome Network tab but I still get a Bad Request error.
  
  HTML:
  
  ```
  <form method="POST" id="addToCartForm">
      {{ getCsrfInput() }}
      <input type="hidden" name="action" value="commerce/cart/updateCart">
      <input type="hidden" name="redirect" value="/cart">
      <input type="hidden" name="purchasableId" value="{{ product.id }}">
      <input type="number" name="qty">
  </form>
  
  ```
  
  JS:
  
  ```
  let formElem = document.getElementById('addToCartForm');
  let form = new FormData(formElem);
  let request = new Request('/', {
    credentials: 'include',
    method: 'post',
    mode: 'same-origin',
    redirect: 'follow',
    headers: new Headers({
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
      'X-Requested-With': 'XMLHttpRequest' // so craft detects ajax
    }),
    body: form
  });
  
  fetch(request).then((response) => {
    if(response.ok) {
      return response.text();
    }
    throw new Error('Network response was not ok.');
  }).then((response) => {
    console.log('Worked:');
    console.log(response);
  }).catch((error) => {
    console.log(error);
  });
  
  ```
  
  **Tags:** plugin-craftcommerce, ajax, javascript
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_0 on 2017-09-11. Score: 2
  
  The problem was resolved by changing the headers set:
  
  ```
  let form = new FormData(this.form);
  let request = new Request('/', {
    credentials: 'include',
    method: 'post',
    mode: 'same-origin',
    redirect: 'follow',
    headers: new Headers({
      'Accept': '*/*',
      'X-Requested-With': 'XMLHttpRequest'
    }),
    body: form
  });
  
  ```
  
  Instead of declaring the Content-Type in the request, I set the encoding type on the form itself, this step is optional as the request sets as multipart/form data by default I think.
  
  ```
  <form method="post" enctype="multipart/form-data">
  ..
  </form>
  
  ```
  
  
  ---
  
  ### Answer by username_1 on 2017-09-11. Score: 1
  
  As mentioned on Twitter, pretty sure this we will be an issue with CSRF ... Get it working first with that turned off is my advice. I have not used Fetch, though.
  
  
  ---
  
  