Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:3000/ [duplicate]

Question

SOLUTION: It turns out I needed to change https://localhost:3000, to http://localhost:3000. (My follow-up question would be why this is the case, especially as my code worked for https://www.remoteserver.com/`).

---

I have a development server at https://localhost:3000 and a production server at https://www.remoteserver.com (Node.js/Express). My client is at https://localhost:4200 (Angular).

I fixed the Cross-Origin Request Blocked issue with https://www.remoteserver.com, using the code as below:

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);

But using the same code for my development server https://localhost:3000 I am still facing the CORS blocked issue, and I haven't been able to get rid of the problem.

Is there any reason that the code above would work for the production server but not for the development server?

Any ideas on a fix or what I should try next?

Many thanks!

Answer 1

The three solutions, avoiding CORS problem

1. Allow CORS to server side
2. Use proxy server
3. Use JSONP

Try to use as the following way

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Get know details link