How to solve CORS problem with my Angular App on Heroku

Question

Sorry if there is already an answer for my problem.. but i already did all and can't solve it...

I have 2 projects hosted on heroku, a frontend made with angular and a login backend with java (spring boot). The problem is when i try to login i got the CORS problem

No 'Access-Control-Allow-Origin' header is present on the requested resource.

When i request my springboot server with Postman, it normally works...

Also, this is my server.js for the heroku deploy

const express = require('express');
const path = require('path');
const cors = require('cors');

const app = express();

app.use(cors());

app.use(express.static('./dist/fonetApp'));

app.get('/',function(req,res){
    res.sendFile(path.join(__dirname+'/dist/fonetApp/index.html'));
});

app.listen(process.env.PORT || 8080);

Pleasee.. help t_t

Answer 1

I solved same issue on heroku by using cors

const express = require('express');
const path = require('path');
const cors = require('cors');

const app = express();

// add this code
const whitelist = ['http://localhost:3000']; // list of allow domain

const corsOptions = {
    origin: function (origin, callback) {
        if (!origin) {
            return callback(null, true);
        }

        if (whitelist.indexOf(origin) === -1) {
            var msg = 'The CORS policy for this site does not ' +
                'allow access from the specified Origin.';
            return callback(new Error(msg), false);
        }
        return callback(null, true);
    }
}

// end 
app.use(cors(corsOptions));

app.use(express.static('./dist/fonetApp'));

app.get('/',function(req,res){
    res.sendFile(path.join(__dirname+'/dist/fonetApp/index.html'));
});

app.listen(process.env.PORT || 8080);