title: Unable to send POST data using fetch: React
body: <p>I'm trying to send POST data to the PHP script on a different <code>origin</code> using javascript <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" rel="nofollow noreferrer">fetch API</a> in react. I've got a CORS policy error as can be seen below:</p>
  
  <p><a href="https://i.stack.imgur.com/1lSVA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1lSVA.png" alt="enter image description here"></a></p>
  
  <p>In order to solve the above problem, i added these two lines to my PHP script:</p>
  
  <pre><code>header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
  header('Access-Control-Allow-Methods: GET, POST, PUT');
  </code></pre>
  
  <p>But i'm still unable to get my problem solved. The POST data is not being sent.</p>
  
  <p><strong>JS code:</strong></p>
  
  <pre><code>fetch('http://localhost/articles-mania/publish.php', {
      method: 'POST',
      body: data,  // JSON Object 
      headers : { 
          'Content-Type': 'application/json'
      }
  })
  .then((res) =&gt; res.json())
  .then((response) =&gt; {
      this.setState({
        responseMsg: response.msg
      })
  })
  </code></pre>
  
  <p><strong>PHP Script:</strong></p>
  
  <pre><code>header('Access-Control-Allow-Origin: *');
  header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
  header('Access-Control-Allow-Methods: GET, POST, PUT');
  
  $title = $_POST['article_title'];
  echo json_encode(array('msg' =&gt; $title));
  </code></pre>
  
  <p>Any idea?</p>