title: "Failed to load resource: the server responded with a status of 404 (Not Found)" + "Origin … is not allowed by Access-Control-Allow-Origin."
body: <p>I'm creating a react app with 'create-react-app', express, cors and mysql in which a user should enter some details in a form which then will be sent to a db. All the existing entries should be shown on the web app.
  I tried that locally and everything worked well. The database has been populated and a request has shown the database entries on the web app.</p>
  
  <p>Then i deployed after a 'npm run build' command to my web-hoster (all-inkl.com). Now, the db entries aren't shown and i also can't populate the db anymore.
  The Chrome DevTools and Safari Inspector tell me, that it is something with CORS. After some research i know, that the request to the db should come from the same domain, due to CORS policy (and SOP policy?). But i don't know how to fix it.
  In <a href="https://stackoverflow.com/questions/52413398/mobile-only-cors-error-origin-is-not-allowed-by-access-control-allow-origin-in">this post</a> the problem was incorrect db credentials. In my case, I'm pretty sure, that the credentials are correct.</p>
  
  <p>At this code block Chrome throws the corresponding error</p>
  
  <pre><code>getBets = _ =&gt; {
      fetch("http://www.subdomain.example.de/bets")
          .then(response =&gt; response.json())
          .then(response =&gt; this.setState({bets: response.data}))
          .catch(err =&gt; console.error(err))
    };
  </code></pre>
  
  <h1>Chrome DevTools Errors:</h1>
  
  <p><em>Failed to load resource: the server responded with a status of 404 (Not Found)</em></p>
  
  <p><em>Access to fetch at '<a href="http://www.subdomain.example.de/test" rel="nofollow noreferrer">http://www.subdomain.example.de/test</a>' from origin '<a href="http://subdomain.example.de" rel="nofollow noreferrer">http://subdomain.example.de</a>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.</em></p>
  
  <p><em>TypeError: Failed to fetch</em></p>
  
  <h1>Safari Inspector Errors:</h1>
  
  <p><em>Origin <a href="http://subdomain.example.de" rel="nofollow noreferrer">http://subdomain.example.de</a> is not allowed by Access-Control-Allow-Origin.</em></p>
  
  <p><em>Fetch API cannot load <a href="http://www.subdomain.example.de/test" rel="nofollow noreferrer">http://www.subdomain.example.de/test</a> due to access control checks.</em></p>
  
  <p><em>Failed to load resource: Origin <a href="http://subdomain.example.de" rel="nofollow noreferrer">http://subdomain.example.de</a> is not allowed by Access-Control-Allow-Origin</em></p>
  
  <p><em>TypeError: Origin <a href="http://subdomain.example.de" rel="nofollow noreferrer">http://subdomain.example.de</a> is not allowed by Access-Control-Allow-Origin</em></p>
  
  <p>Since i don't know which part of the code contains the problem, the whole code is following.</p>
  
  <h2>server.js</h2>
  
  <pre><code>const express = require("express");
  const cors = require("cors");
  const mysql = require("mysql");
  
  const app = express(); //initialize express
  
  // const PORT = process.env.port;
  
  const SELECT_ALL_BETS_QUERY = "SELECT * FROM markers";
  
  const connection = mysql.createConnection({
      host: "http://www.subdomain.example.de",
      user: "***",
      password: "***",
      database: "***"
  });
  
  connection.connect(err =&gt; {
      if (err) {
          return err;
      }
  });
  
  app.use(cors());
  
  app.get("/", (req, res) =&gt; {
      res.send("go to /test to see tests")
  });
  
  app.get("/test", (req, res) =&gt; {
      connection.query(SELECT_ALL_BETS_QUERY, (err, results) =&gt; {
          if (err) {
              return res.send(err)
          }
          else {
              return res.json({
                  data: results
              })
          }
      })
  });
  
  app.get("/test/add", (req, res) =&gt; {
      const {name, test, count1, count2, type} = req.query;
      const INSERT_BET = `INSERT INTO markers (name, test, lat, lng, type) VALUES("${name}", "${test}", 99, 88, "test3")`;
      connection.query(INSERT_BET, (err, results) =&gt; {
          if (err) {
              return res.send(err);
          }
          else {
              return res.send("succesfully added your test")
          }
      })
  });
  
  app.listen(4000, () =&gt; {
      console.log("I'm listening to port 4000")
  });
  </code></pre>
  
  <h2>App.js</h2>
  
  <pre><code>import React, { Component } from "react";
  import './App.css';
  
  class App extends Component {
  
    state = {
      tests: [],
      test: {
        person_name: "Peter Pan",
        time: "10:17 Uhr"
      }
    };
  
    componentDidMount() {
      this.getTest();
    }
  
    getTests = _ =&gt; {
      fetch("http://www.subdomain.example.de/test")
          .then(response =&gt; response.json())
          .then(response =&gt; this.setState({tests: response.data}))
          .catch(err =&gt; console.error(err))
    };
  
    addTest = _ =&gt; {
      const { test } = this.state;
  
      fetch(`http://www.subdomain.example.de/tests/add?name=${test.person_name}&amp;bet=${test.time}`)
          .then(response =&gt; response.json())
          .then(this.getTests)
          .catch(err =&gt; console.error(err))
    };
  
    renderBets = ({ test_id, name, test}) =&gt;
        &lt;div key={test_id}&gt;
          &lt;p&gt;{name}&lt;/p&gt;
          &lt;p&gt;{test}&lt;/p&gt;
        &lt;/div&gt;;
  
      render() {
      const { tests, test } = this.state;
  
          return (
              &lt;div&gt;
                {tests.map(this.renderTests)}
                &lt;div&gt;
                  &lt;input
                      value={test.person_name}
                      onChange={e =&gt; this.setState({test: { ...test, person_name: e.target.value}})}
                  /&gt;
                  &lt;input
                      value={test.time}
                      onChange={e =&gt; this.setState({test: { ...test, time: e.target.value}})}
                  /&gt;
                  &lt;button onClick={this.addTest}&gt;Click Me&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default App;
  
  </code></pre>
  
  <h1>Information to the boundary conditions of the server</h1>
  
  <p>The server ist hosted by <em>all-inkl.com</em>. I working with a premium account due to the possibility of ssh. With ssh i installed node.js in the directory of my project. node.js is required because my project ist built up with reactJS.
  If any further information due to the server configuration, please ask since i don't know which information are helpful.
  I followed the instructions for installing node.js on <a href="http://mamas-blog.de/2017/05/11/all-inkl-com-node-js-und-composer-im-hosting-einrichten/" rel="nofollow noreferrer">this page</a></p>
  
  <p>In addition, i added the following to the .htaccess-file:</p>
  
  <pre><code>&lt;IfModule mod_headers.c&gt;
    &lt;FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$"&gt;
      Header set Access-Control-Allow-Origin "*"
    &lt;/FilesMatch&gt;
  &lt;/IfModule&gt; 
  </code></pre>
  
  <h1>Edit</h1>
  
  <p>I found a helpful (hopefully) webpage <a href="https://www.test-cors.org" rel="nofollow noreferrer">test-cors</a>. The test outputs the following without passing any request headers:</p>
  
  <pre><code>Fired XHR event: loadstart
  Fired XHR event: readystatechange
  Fired XHR event: progress
  Fired XHR event: readystatechange
  Fired XHR event: readystatechange
  Fired XHR event: load
  XHR status: 200
  XHR status text: 
  XHR exposed response headers:
  
  cache-control: public, max-age=600
  content-encoding: gzip
  content-type: text/html
  date: Fri, 02 Aug 2019 17:36:12 GMT
  etag: "1rO4KQ"
  expires: Fri, 02 Aug 2019 17:46:12 GMT
  server: Google Frontend
  x-cloud-trace-context: 2c0391d5a5e09665df3f0b243e2b90a6;o=1
  </code></pre>
  
  <p>Does the <em>XHR status</em> mean, that CORS is running and that there isn't any error?</p>