title: ReactJS/Express Axios POST returns CORS Error or 404 Error
body: <p>I'm an adjunct professor teaching a React/Mongoose course online. Last term many students started encountering problems either with CORS or 404 errors popping up on what was otherwise good code. I've been fighting for a solution for several weeks now.</p>
  <p>First of all, when launching the app in Chrome 93.0.4577.63, all I get is a CORS error without any other helpful information that I can decypher: &quot;Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See <a href="https://reactjs.org/link/crossorigin-error" rel="nofollow noreferrer">https://reactjs.org/link/crossorigin-error</a> for more information.&quot;</p>
  <p>I am able to get further in Edge.</p>
  <p>In case it makes any difference, the server.js file is in the root of the application, but the app code is located in a folder called &quot;client&quot;. This is a portion of the /context/userProvider.js page in that client folder that is calling an axios function. The key portion of the code is the signup function().</p>
  <pre><code>import React, {useState} from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  export const UserContext = React.createContext()
  
  const userAxios = axios.create()
  
  userAxios.interceptors.request.use(config =&gt; {
      const token = localStorage.getItem(&quot;token&quot;)
      config.headers.Authorization = `Bearer ${token}`
      return config
  })
  
  export default function UserProvider(props){
      const initState ={
          user: JSON.parse(localStorage.getItem(&quot;user&quot;)) || {},
          token: localStorage.getItem(&quot;token&quot;) || &quot;&quot;,
          comments: []
      }
  
      const [userState, setUserState] = useState(initState)
  
      function signup(credentials){
          axios.post(&quot;/auth/signup&quot;, credentials)
              .then(res =&gt; {
                  const {user, token} = res.data
                  localStorage.setItem(&quot;token&quot;, token)
                  localStorage.setItem(&quot;user&quot;, JSON.stringify(user))
                  setUserState(prevUserState =&gt; ({
                      ...prevUserState,
                      user,
                      token
                  }))
              })
              .catch(err =&gt; console.log(err))
      }
  </code></pre>
  <p>I have the following line of code in the package.json file that sets the proxy to the port on which react is running:</p>
  <pre><code>&quot;proxy&quot;: &quot;http://localhost:9000&quot;
  </code></pre>
  <p>Here is code from the server.js file that launches the mongoose server on port 9000:</p>
  <pre><code>app.use('/api', expressJwt({secret: process.env.SECRET, algorithms: ['RS256']}));
  app.use('/auth', require(&quot;./routes/authRouter.js&quot;));
  app.use('/api/issue', require(&quot;./routes/issueRouter&quot;));
  app.use('/api/comment', require(&quot;./routes/commentRouter&quot;));
  app.use('/api/user', require(&quot;./routes/userRouter.js&quot;))
  
  app.use((err, req, res, next) =&gt; {
    console.log(err)
      if(err.name === &quot;Unauthorized Error&quot;){
        res.status(err.status)
      }
      return res.send({errMsg: err.message})
  });
  
  app.listen(9000, () =&gt; { 
      console.log(&quot;The App is listening on port 9000&quot;)
  });
  </code></pre>
  <p>When the user provides the user credentials on a fully functioning sign-up page, the credentials are successfully passed to the signup function, as shown from a console.log(credentials), but then I get the 404 error returned from the .catch portion of the signup function.</p>
  <pre><code>{username: 'csanders', password: 'chumisyum', firstName: 'chumbucket', lastName: 'sanders', phoneNumber: '1231231234'}
  
  UserProvider.js:35 Error: Request failed with status code 404
      at createError (createError.js:16)
      at settle (settle.js:17)
      at XMLHttpRequest.handleLoad (xhr.js:62)
  </code></pre>
  <p>When I run the same operation through Postman on port 3000, I get the following error.</p>
  <pre><code>&lt;pre&gt;Cannot POST /auth/signup&lt;/pre&gt;
  </code></pre>
  <p>But when I run it through Postman on port 9000, it appears to work fine:</p>
  <p><a href="https://i.stack.imgur.com/eRIgF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eRIgF.png" alt="postman screenshot" /></a></p>
  <p>Can anyone give me any insight on either how to clear the CORS error in Chrome or how to get the 404 error in Edge to go away? I'm getting desperate!</p>