title: Why does fetch return 302 status code but XHR doesn't?
body: <p>I'm using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" rel="nofollow noreferrer">fetch</a> to query my own WordPress REST API endpoint. However, every request that I make with fetch ends up with a infinite loop of 302 status codes until fetch finally errors with TOO_MANY_REDIRECTS. </p>
  
  <p><a href="https://i.stack.imgur.com/al222.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/al222.gif" alt="illustration of problem"></a></p>
  
  <p>This is on Chrome 56, using the native fetch. But when I visit the endpoint using my browser, use XHR or Postman, I always get 200 as the status. </p>
  
  <p>XHR on the other hand...</p>
  
  <p><a href="https://i.stack.imgur.com/EsqIj.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EsqIj.gif" alt="XHR doesn&#39;t suffer from this problem"></a></p>
  
  <p>Code relevant to this problem: </p>
  
  <pre><code>  static checkStatus(email = null) {
      const cookie = Cookies.get('cookiename');
      const data = email || cookie;
  
      if (!cookie &amp;&amp; !email) {
        return Promise.reject(new Error('No data given.'));
      }
  
      // This works.
      return new Promise((resolve, reject) =&gt; {
        request({
          url: `/wp-json/woo/donate/status/?email=${data}`,
          method: 'GET',
          success: (response) =&gt; {
            resolve(response);
          },
          error: (error) =&gt; {
            reject(error);
          }
        })
      });
  
      // This doesn't.
      return fetch(`/wp-json/woo/donate/status/?email=${data}`, {
        method: 'GET',
      });
    }
  </code></pre>
  
  <p>Please note that I do not actually have two consecutive return statements in my code, that's just for demo. I'm using <code>request()</code> as a wrapper to XHR, you can find the <a href="https://gist.githubusercontent.com/k1sul1/1e34a2c5eab0f7d903037c0e3e8605e1/raw/5762ab8dd0e83ebf6a0b505acb18b0151dc8ab5f/request.js" rel="nofollow noreferrer">source for that here</a>.</p>
  
  <p>So how do I go around this? I know fetch is still "experimental", but I've used it in several already shipped projects by bundling a polyfill to browsers that don't support it just yet. This is a new thing. </p>