title: Unexpected token < in JSON when using fetch()
body: <p>I am trying to connect my React signup page to my Django API so when a user signs up a user profile is created in Django.</p>
  <p>I get this error on my console when I try to create a new user:</p>
  <pre><code>Signup.js:33          POST http://127.0.0.1:8000/api/v1/users/profiles/?format=api 400 (Bad Request)
  onSubmit @ Signup.js:33
  callCallback @ react-dom.development.js:188
  invokeGuardedCallbackDev @ react-dom.development.js:237
  
  VM1121:5 Uncaught (in promise) SyntaxError: Unexpected token &lt; in JSON at position 4
  </code></pre>
  <p>This is what I see in network inspector:</p>
  <pre><code>POST /api/v1/users/profiles/?format=api
  HTTP 400 Bad Request
  Allow: GET, POST, HEAD, OPTIONS
  Content-Type: application/json
  Vary: Accept
  
  {
      &quot;detail&quot;: &quot;JSON parse error - Expecting value: line 1 column 2 (char 1)&quot;
  }
  </code></pre>
  <p>This is the code I have on signup.js:</p>
  <pre><code>const onSubmit = e =&gt; {
      e.preventDefault();
  
      const user = {
          email: email,
          name: name,
          location: 'Example',
          password: password,
          user_id: 1
      };
      console.log(user);
      fetch('http://127.0.0.1:8000/api/v1/users/profiles/?format=api', {
          method: 'POST',
          headers: {
              'Content-Type':'application/json'
          },
          body: JSON.stringify(user)
      })
          .then(res =&gt; res.json())
          .then(data =&gt; {
              if (data.key) {
                  localStorage.clear();
                  localStorage.setItem('token',data.key);
                  window.location.replace('http://localhost:3000/profile/');
              } else {
                  setEmail('');
                  setName('');
                  setPassword('');
                  localStorage.clear();
                  setErrors(true);
              }
          });
  };
  </code></pre>
  <p>and in settings.py:</p>
  <pre><code>CORS_ORIGIN_ALLOW_ALL = True
  CORS_ALLOW_CREDENTIALS = True
  
  CORS_ALLOW_METHODS = [
      &quot;DELETE&quot;,
      &quot;GET&quot;,
      &quot;OPTIONS&quot;,
      &quot;PATCH&quot;,
      &quot;POST&quot;,
      &quot;PUT&quot;,
  ]
  </code></pre>
  <p>I assume I am using the right endpoint. When I run my django server and visit this URL this is what I see:</p>
  <pre><code>GET /api/v1/users/profiles/?format=api
  HTTP 200 OK
  Allow: GET, POST, HEAD, OPTIONS
  Content-Type: application/json
  Vary: Accept
  
  [
      {
          &quot;user_id&quot;: 1,
          &quot;name&quot;: &quot;&quot;,
          &quot;location&quot;: &quot;&quot;,
          &quot;password&quot;: &quot;&quot;,
          &quot;email&quot;: &quot;&quot;,
          &quot;signup_confirmation&quot;: false
      }
  ]
  </code></pre>
  <p><strong>UPDATE</strong></p>
  <p>As suggested by one of the answers I tried adding this to my Signup.js</p>
  <pre><code>   fetch('http://127.0.0.1:8000/api/v1/users/profiles/?format=api')
          .then(res =&gt; res.text())
          .then(text =&gt; console.log(text))
  </code></pre>
  <p>This is what I get on my console now</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      
  
        
          &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/&gt;
          &lt;meta name=&quot;robots&quot; content=&quot;NONE,NOARCHIVE&quot; /&gt;
        
  
        &lt;title&gt;Profile List – Django REST framework&lt;/title&gt;
  
  ...
  </code></pre>