title: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:3000/
body: <p>SOLUTION: It turns out I needed to change <strong>https</strong>://localhost:3000, to <strong>http</strong>://localhost:3000. (My follow-up question would be why this is the case, especially as my code worked for <strong>https</strong>://www.remoteserver.com/`). </p>
  
  <hr>
  
  <p>I have a development server at <code>https://localhost:3000</code> and a production server at <code>https://www.remoteserver.com</code> (Node.js/Express). My client is at <code>https://localhost:4200</code> (Angular). </p>
  
  <p>I fixed the Cross-Origin Request Blocked issue with <code>https://www.remoteserver.com</code>, using the code as below:</p>
  
  <pre><code>var cors = require(cors());
  app.use(cors());
  app.options('*',cors());
  var allowCrossDomain = function(req,res,next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();  
  }
  app.use(allowCrossDomain);
  </code></pre>
  
  <p>But using the same code for my development server <code>https://localhost:3000</code> I am still facing the CORS blocked issue, and I haven't been able to get rid of the problem. </p>
  
  <p>Is there any reason that the code above would work for the production server but not for the development server?</p>
  
  <p>Any ideas on a fix or what I should try next?</p>
  
  <p>Many thanks!</p>