对于部署在 heroku 上的 Angular 应用程序，我该如何处理 CORS 问题？

Question

I am deploying my Angular app and a Postgres Express backend to heroku to allow them to talk with one another. The big problem that I have now is that whenever I try to use fetch methods, it says that I need CORS enabled or a heading for it. I already set it up in my express backend below:

const app = express();
const cors = require('cors');
const port = process.env.PORT || 5000;
const Pool = require('pg').Pool;
const transRoutes = require('./transactions');
const groupsRoutes = require('./budget-group');
const itemsRoutes = require('./budget_item');
const accRoutes = require('./account');

app.use(cors({origin: '*'})); //I also tried cors()
app.use(express.json());
app.use('/transactions', transRoutes);
app.use('/groups', groupsRoutes);
app.use('/items', itemsRoutes);
app.use('/accounts', accRoutes);
app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
 })

const pool = new Pool({
    connectionString: process.env.DATABASE_URL,
    ssl: {
        rejectUnauthorized: false
    }
});

app.get('/', (req, res) => {
    res.send('Welcome to your server.');
});

app.get('/users', async (req, res) => {
    try {
        const getAllUsers = await pool.query("SELECT * FROM users");
        res.json(getAllUsers);
    } catch (err) {
        console.log(err);
    }
});

app.get('/login/:username/:password', async (req, res) => {
    try {
        const getUser = await pool.query("SELECT * FROM users WHERE username = $1 AND password = $2",
        [
            req.params.username,
            req.params.password
        ]);
        res.json(getUser.rows);
    } catch (err) {
        console.log(err);
    }
});

//More routes omitted for brevity

app.listen(port, () => {console.log(`Listening on port ${port}`)});

I think my code is fine for the backend, so I feel that the Angular code is the problem, but I don't understand how to fix it. Do I have to manually add a header for each fetch method done to have the CORS feature, or do I have to use some sort of proxy that I found but was too confused how to do it?

An example of a fetch method I did is below:

fetch(`https://name-redacted.herokuapp.com/login/${this.username}/${this.password}`, {
        method: 'GET',
        headers: {'Content-Type': 'application/json'}
      }).then(res => res.json())
      .then(info => {
        if (info.length === 0) {
          this.failedAuth = true;
        } else {
          this.infoService.setUpLoginInfo(info[0]);
          this.router.navigateByUrl('/instructions');
        }
      });

Also for deploying the angular part, I followed this guide: https://youtu.be/KVFrTf4VD2o I just thought it might be important since it uses an express server to give the files instead of doing ng serve after building the app.

Edit: For the CORS error: Access to fetch at 'https://app-backend.herokuapp.com/register' from origin 'https://app-project.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Headers: Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept Access-Control-Allow-Methods is not shown.

Answer 1

It's possible that your server is just not ready to handle pre-flight requests. You don't seem to have any route that handles the OPTIONS HTTP method which a pre-flight request would be. Express' documentation on CORS has an example on how to handle pre-flight requests

The simplest way to enable it on all requests, as per the documentation, would be to configure a route that handles OPTIONS as such:

app.options('*', cors())

Answer 2

I was able to figure out how to solve my problem. @WiktorZychla's comment was correct in that any request with credentials will cause * to not work. Source To fix this, I found another discussion where they put:

const allowedOrigins = ['https://someapp.com'];
app.use(cors({
    credentials: true,
    origin: (origin, callback) => {
      if (allowedOrigins.includes(origin)) {
        callback(null, true) 
      } else {
        callback(new Error(`Origin: ${origin} is now allowed`))
      }
    }
  }));

You first create an allowedOrigins array to put any urls that you use to access the API. Then you let your server use a cors object that allows credentials and then checks the origin of the request. If the origin exists in the array, then it will return a callback that allows each request to work.

Also if you have separate routes like I do below:

const transRoutes = require('./transactions');
const groupsRoutes = require('./budget-group');
const itemsRoutes = require('./budget_item');
const accRoutes = require('./account');
app.use('/transactions', transRoutes);
app.use('/groups', groupsRoutes);
app.use('/items', itemsRoutes);
app.use('/accounts', accRoutes);

Then in each route file, you need to copy the cors info I have at the top and change it so that each router has cors configured. There may be another solution, but this was the fastest for me.