After thorough testing with Postman, my backend server is functioning properly and generating the desired responses for all requests.
However, my Angular app is encountering an unknown CORS error on every request despite receiving a 200 Preflight response. I have verified that the app is correctly configured.
The issue appears to be related to the absence of an origin header in the final requests, but I am unsure why this is happening.
This is the Express CORS implementation:
app.use((req, res, next) => {
const actualOrigin = req.headers.origin;
if (originArray.includes(actualOrigin)) {
res.setHeader('Access-Control-Allow-Origin', actualOrigin);
} else {
return res.status(403).send('Unauthorized Origin');
}
res.setHeader(
'Access-Control-Allow-Methods',
'GET,POST,PATCH,DELETE,OPTIONS,PUT'
);
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') {
res.sendStatus(200);
} else {
next();
}
});
Example frontend request:
async login(data) {
console.log('data is: ', data);
let sendData = {};
if (data.loginType === 'slot') {
sendData = {
username: data.username,
password: data.password,
type: data.loginType
};
} else if (data.loginType === 'user_name') {
sendData = {
username: data.username,
password: data.password,
type: data.loginType
};
}
Inspected request:
auth.service.ts:275 Error occurred during login: HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: 'Unknown Error', url: 'http://localhost:3000/ibescore/auth/login', ok: false, …}
Preflight request details:
Request URL:
http://localhost:3000/ibescore/auth/login
Request Method:
OPTIONS
Status Code:
200 OK
...
Actual request details:
Request URL:
http://localhost:3000/ibescore/auth/login
...