title: XMLHttpRequest has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response
body: <p>I am having issues creating new users from the form due to CORS. I was able to last week in this app but not sure what is missing from my server (methods, origin, headers, etc.)or my API call.</p>
  <p>Here is what is suggested in the issues part of the console:</p>
  <p>To fix this issue, include the additional request headers you want to use in the Access-Control-Allow-Headers response header of the associated preflight request.
  1 request
  Request Status  Preflight Request   Disallowed Request Header
  new_user    blocked
  new_user    content-type</p>
  <p>Here is the server code:</p>
  <pre class="lang-js prettyprint-override"><code>require('dotenv').config();
  const express = require('express');
  const cors = require('cors');
  
  const app = express();
  
  // Cookies:
  const cookieParser = require('cookie-parser');
  
  require('./config/mongoose.config');
  app.use(cookieParser());
  
  //required for post request
  app.use(express.json());
  app.use(express.urlencoded({ extended: true }));
  
  // routes:
  require('./routes/user.routes')(app);
  require('./routes/spot.routes')(app);
  
  
  // blocking cors errors:
  const corsOptions = {
      origin: 'http://localhost:3000',
      methods: [&quot;GET&quot;, &quot;POST&quot;],
      allowedHeaders: [&quot;*&quot;],
      credentials: true,            //access-control-allow-credentials:true
      optionSuccessStatus: 200,
  }
  app.use(cors(corsOptions)) // Use this after the variable declaration
  
  
  //  MIDDLEWARE:
  // app.use(cors(
  //     { credentials: true, origin: 'http://localhost:3000' },
  //     { headers: { &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot; } }));
  
  
  // Middleware CORS API CALLS: 
  app.use((req, res, next) =&gt; {
      if (req.method === &quot;OPTIONS&quot;) {
          res.header(&quot;Access-Control-Allow-Methods&quot;, &quot;PUT, POST, PATCH, DELETE, GET&quot;, true);
          return res.status(200).json({});
      }
      next();
  });
  
  //listen on port:
  app.listen(9000, () =&gt; {
      console.log(&quot;Listening at Port 9000&quot;)
  })
  </code></pre>
  <p>Here are the routes:</p>
  <pre class="lang-js prettyprint-override"><code>const UserController = require('../controllers/user.controllers');
  const { authenticate } = require('../config/jwt.config');
  module.exports = function (app) {
      app.post('/api/new_user', authenticate, UserController.register);
      app.get('/api/users', UserController.getAllUsers);
      app.get('/api/users/:id', UserController.login);
      app.post('/api/users/logout', UserController.logout);
      app.put('/api/users/:id', UserController.updateUser);
      app.delete('/api/users/:id', UserController.deleteUser);
  }
  </code></pre>
  <p>Here is the client (form code):</p>
  <pre class="lang-js prettyprint-override"><code>const onSubmitHandler = e =&gt; {
          e.preventDefault();
  
          const { data } =
              axios.post('http://localhost:9000/api/new_user', {
                  userName,
                  imgUrl,
                  email,
                  password,
                  confirmPassword
              },
                  { withCredentials: true, },
                  // { headers: { 'Access-Control-Allow-Origin': '*' } }
                  { headers: [&quot;*&quot;] }
              )
                  .then(res =&gt; {
                      history.push(&quot;/dashboard&quot;)
                      console.log(res)
                      console.log(data)
                  })
                  .catch(err =&gt; console.log(err))
  </code></pre>
  <p>I've done a bit of research and not sure if I should make a proxy, use a plugin, etc, but I could use the extra eyes. Thanks all!</p>