SOLVED Cannot get CORS to work no matter what I try

Question

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.

not sure if there is a difference I have done it both ways without a problem. before I posted this it was `app.listen` but i tried `http.listen` to try and get cors to work — LizardKing, Sep 10 '19 at 14:48
Your request seems to be to `localhost:3030`, but the error message indicates it requires `http` - Have you tried `http://localhost:3030/`? — Mortz, Sep 10 '19 at 14:55
Isn't the error is self-explanatory? You are using `localhost:3030/...`, you should be using `http://localhost:3030/...` (or https). This particular error is caused by the client side. — freakish, Sep 10 '19 at 14:59
wow @freakish you are totally correct that was exactly the issue and adding `http://` to the front of my endpoint fixed all issues with sending post to my server. Not sure how I missed that — LizardKing, Sep 10 '19 at 15:24

score 4 · Accepted Answer · answered Sep 10 '19 at 15:00

4

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

answered Sep 10 '19 at 15:00

Vasileios Pallas

4,801
4
33
50

appreciate the help so much! – LizardKing Sep 10 '19 at 15:19
I'm glad I helped. Instead of changing the title to SOLVED, you can mark the answer as correct and help other developers who are facing the same issue. – Vasileios Pallas Sep 10 '19 at 17:52
1

I would but nobody answered what the solution was. I did have your answer marked as the solution for a second but realized it wasn't the full solution and it required (unfortunately) a much more simpler solution hence me putting it in the question. if you would like to edit your answer to also include said solution I would be more than happy to mark your answer as such. – LizardKing Sep 10 '19 at 18:42
ok, now I saw the comments. To be fair I've never used `http` with `localhost` because it's useless since the browser removes the `http` from the URL – Vasileios Pallas Sep 10 '19 at 18:49
1

your not wrong I think that's why I missed that detail for so long. – LizardKing Sep 11 '19 at 12:36

score 3 · Answer 2 · answered Sep 10 '19 at 15:04

3

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

answered Sep 10 '19 at 15:04

Ishita Singh

297
1
6

SOLVED Cannot get CORS to work no matter what I try

2 Answers2