title: CORS-issue - "No 'Access-Control-Allow-Origin' header is present on the requested resource."
body: <p>So I've been trying to pass data from my front-end to my back-end (however, I'm not very experienced within this area). The data comes through, however, if I try to insert the data into my MySQL-DB through PDO the browser gives me the following error: </p>
  
  <blockquote>
    <p>Failed to load <a href="http://localhost:8888/post_recipe.php" rel="nofollow noreferrer">http://localhost:8888/post_recipe.php</a>: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."</p>
  </blockquote>
  
  <p><strong>JS</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>postToAPI = () =&gt; {
    fetch(`http://localhost:8888/post_recipe.php`, {
      method: 'POST',
      headers: {
          'Content-Type': 'text/html'
      },
      mode: 'cors',
      body: JSON.stringify({
        title: this.state.title,
        description: this.state.description,
        userID: this.props.userInfo.response.id,
        name: this.props.userInfo.response.name,
        stepByStep: (this.state.stepByStep),
        recipeIngredients: (this.state.recipeIngredients),
        profileImg: this.props.userInfo.response.picture.data.url
      })
    })
      .then((response) =&gt; response.json())
        .then((fetch) =&gt; {
          console.log(fetch)
        });
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>PHP</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;?php
  
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Credentials: true');
  header("Content-type: text/html; charset=utf-8");
  header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
  header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
  
  $post = json_decode(file_get_contents('php://input'));
  $array = json_decode(json_encode($post), True);
  
  $pdo = new PDO(
    "mysql:host=localhost:8889;dbname=veganify;charset=utf8",
    "root",
    "root"
  );
  
  $statement = $pdo-&gt;prepare(
      "INSERT INTO posts (title, description, userID, name, stepByStep, recipeIngredients, profileImg)
      VALUES (:title, :description, :userID, :name, :stepByStep, :recipeIngredients, :profileImg)"
      );
      $statement-&gt;execute(array(
      ":title"     =&gt; $array["title"],
      ":description"     =&gt; $array["description"],
      ":userID"    =&gt; $array["userID"],
      ":name"        =&gt; $array["name"],
      ":stepByStep"    =&gt; $array["stepByStep"],
      ":recipeIngredients"        =&gt; $array["recipeIngredients"],
      ":profileImg"       =&gt; $array["profileImg"]
      ));
  }
  
  echo json_encode($array);
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So if I delete the MySQL-insertion, the data comes back to the front-end. I have been stuck here for a while now searching various forums for a solution. The error message says that the header is not present, however it is there, as you can see.</p>
  
  <p>Any help would be much appreciated! </p>
  
  <p>Cheers!</p>