LizardKing
LizardKing

Reputation: 356

SOLVED Cannot get CORS to work no matter what I try

SOLVED thanks to Freakish in the comments the issue was my endpoint was using localhost:3030 instead of http://localhost:3030

Node is running on port 3030 and ionic is running in serve on port 8100 so localhost:3030 and localhost:8100 I know this is the problem and have looked for all the ways to implement and allow CORS.

I have tried everything under the sun from installing and using cors middleware to following other guides on implementing CORS. In the code below is where I tried following a guide to make a custom middleware and even that doesn't work.

Side note socket.io is working just fine.

app.use(bodyParser.urlencoded({'extended':'true'}));
app.use(bodyParser.json({ limit: '5mb' }));

// enable CORS
app.use(function( req, res, next ) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "x-requested-with, content-type");
    res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Max-Age", "1000000000");
    if ('OPTIONS' == req.method) { res.send(200); } else { next(); } 
});

io.on('connection', (socket) => {
    socketIo.process(socket, io);
});

app.post('*', (req, res) => { 
    post.process(req, res);
});

http.listen(port, function(){
    console.log('Listening on Port: ' + port);
});

Besic error I get when trying to post.

Access to XMLHttpRequest at 'localhost:3030/api/signin' from origin 'http://localhost:8100' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Upvotes: 4

Views: 8479

Answers (2)

Ishita Singh
Ishita Singh

Reputation: 337

Chrome doesn't support localhost under Access-Control-Allow-Origin:'*'

Access-Control-Allow-Origin: * doesn't match localhost
https://bugs.chromium.org/p/chromium/issues/detail?id=67743

Try, 127.0.0.1 instead of localhost

Upvotes: 7

Vasileios Pallas
Vasileios Pallas

Reputation: 4877

I had the same issue with express and a reactJs application. To solve it, I added the cors library.

Example with cors on express:

const cors = require("cors");

const app = express();

app.use(
  cors({
    allowedHeaders: ["authorization", "Content-Type"], // you can change the headers
    exposedHeaders: ["authorization"], // you can change the headers
    origin: "*",
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    preflightContinue: false
  });
);

Upvotes: 4

Related Questions