Express: CORS issues despite adding options to allow headers

[ER-GAIBI]

Hi,

I need your help and suggestions please :

I am working on a wep application based on Angular and express js.
I am sending a GET request from interceptor to verify the web token, but i got a CORS problem. I searched on the net before creating this issue, and all suggestion are about adding options to allow headers, but without result untill now.

here is my code :
_FRONT END_

service.ts

...
public url = 'http://localhost:3000';
getServers() {
        return this.http.get(this.url + '/marketServerUk');
    }
...

interceptor.ts

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import {UserServiceService} from '../services/user-service.service';

@Injectable()

export class AuthInterceptor implements HttpInterceptor {
    constructor(private userService: UserServiceService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        const authToken = this.userService.getToken();
        req = req.clone({
            setHeaders: {
                Authorization: 'Bearer ' + authToken
            }
        });
        return next.handle(req);
    }
}

_BACK END_

router.js

router.get('/marketServerUk', verifyToken,  async (req, res, next) => {
    console.log('test');
    try {
        res.setHeader('Access-Control-Allow-Headers', 'authorization');
        res.setHeader('Access-Control-Allow-Origin', '*');
        let results = await db.allMarketServersForUk();
        await res.json(results);
    } catch (e) {
        console.log(e);
        res.sendStatus(500);
    }
});

function verifyToken(req, res, next) {
    console.log('test');
    try {
        const bearerHeader = req.headers;
        if (typeof bearerHeader !== 'undefined') {
            req.token = bearerHeader;
            next();
        }
    } catch (e) {
        console.log(e);
        res.sendStatus(403);
    }
}

Error message :

Access to XMLHttpRequest at 'http://localhost:3000/technicalServiceForUk' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Note That :

When I remove the interceptor from the front end, the http request is working fine.
The moesif extension is already installed.
The web token is stored on local storage and sent on Request Headers, No Response Headers.
I put a console.log('test') on the backend side and nothing is shown on the console.

[jonchurch]

I think your issue is that you are sending credentials with the request, but you cannot send credentials while also using Allow-Origin: *. See this mdn article for more info. Thats the first issue I see, but I could be wrong. To fix that you need to specifically whitelist the origin the request will come from.

Id suggest using the express-cors middleware on this specific route, and maybe ask your question there or search their issues. This doesnt look like a specifically express issue, but an issue with CORS (which is admittedly a tricky setup, hence my recc of using a dedicated middleware to help with edgecases).

[ghinks]

@ER-GAIBI did the advice above help you? Is that enough information to close this issue?

[ER-GAIBI]

Hi @ghinks
yes, the advice solved the problem.
Thnak you @jonchurch for your help,

I provide the solution in the source code below for other users :

In stall the CORS module :

npm install cors

Add CORS module to your backend app :

var cors = require('cors')
var app = express()

app.use(cors())

for more information, you can reffer to this link :
https://expressjs.com/en/resources/middleware/cors.html