title: fetch() with cross domain cause JSON.parse error
body: <p>I'm trying to use fetch() with cross domain, but I'm getting unusual errors.  I have the following script hosted on <code>http://example2.com/index.html</code></p>
  
  <pre><code>let url = "https://example1.com/login";
  fetch(url,
          {
          "method":"POST",
          "content-type":"application/x-www-form-urlencoded",
          "mode":"no-cors",
          "headers":{
                  "Authorization":"Basic johnjohn",
                  "Auth-Secret":"johnsecretpassword",
          }
  })
  .then(response=&gt;response.text())
  .then(content=&gt;{
          console.log(content); // prints empty line
          json = JSON.parse(content);
  })
  .catch(e=&gt;console.log(`Error occurred: ${e}`));
  </code></pre>
  
  <p>When I run this script, my <code>console.log(content)</code> prints an empty line and my <code>JSON.parse(content)</code> gives a <code>Error occurred: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data</code> error.</p>
  
  <p>When I go to FireFox developer console, click on network, click on response, I do see the following payload:</p>
  
  <p><a href="https://i.stack.imgur.com/f46AX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f46AX.png" alt="enter image description here"></a></p>
  
  <p>Changing the <code>response.text()</code> to <code>response.json()</code> triggers the <code>catch</code> block with the same JSON parse error.</p>
  
  <p>Also, my <code>https://example1.com/login</code> is a php file with the following content:</p>
  
  <pre><code>&lt;?php
  header('Content-Type: application/json');
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Headers: Authorization, Auth-Secret, Content-Type');
  
  die(json_encode(array("data"=&gt;"authorization","status"=&gt;"fail")));
  </code></pre>
  
  <p>What am I doing wrong?</p>