angular with web API

Question

when am trying to call any api i am facing 400 error .`

checkLogin(userInput): Observable<any> {
 return this.http.get('https://***/testhandler').pipe(
    map(this.extractData),
    catchError((error: HttpErrorResponse) => {
        let errorMessage = '';
        if (error.error instanceof ErrorEvent) {
            // client-side error
            errorMessage = `Error: ${error.error.message}`;
        } else {
            // server-side error
            errorMessage = `Error Code: ${error.status}\nMessage: ${error.statusText}`;
        }
        // window.alert(errorMessage);
        return of("");
    })
    // catchError(this.handleError<any>('addProduct'))
);`

i added the header

request = request.clone({
    setHeaders: {
        //Authorization: `Bearer ${currentUser.token}`
       'app-auth-fetch-qualifier': localStorage.getItem("tokenId"),
    }
}); 

i am getting 400 error , my server side configuration

if (Request.HttpMethod == "OPTIONS")
{

    Response.AddHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
    Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
    Response.AddHeader("Access-Control-Max-Age", "1728000");
    Response.AddHeader("Access-Control-Allow-Credentials", "true");
    Response.AddHeader("Access-Control-Allow-Headers",
        "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With,
         Content-Type, Access-Control-Request-Method,
         Access-Control-Request-Headers,app-auth-fetch-qualifier");
    Response.End();
}
else
{
    Response.AddHeader("Access-Control-Allow-Credentials", "true");
}

and my config file -

 <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
    <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS" />
    <add name="Access-Control-Max-Age" value="1728000" />
 </customHeaders>

before i was getting the error

has been blocked by CORS policy: Request header field app-auth-fetch-qualifier is not allowed by Access-Control-Allow-Headers in preflight response.

Note - if i remove

'app-auth-fetch-qualifier': localStorage.getItem("tokenId")

then request going successfully .

let me know what i missing or what changes need to be done .

Answer 1

Possible duplicate of https://stackoverflow.com/a/19744754/11475011

This is a part of security, you cannot do that. If you want to allow credentials then your Access-Control-Allow-Origin must not use *. You will have to specify the exact protocol + domain + port. For reference see these questions :

Access-Control-Allow-Origin wildcard subdomains, ports and protocols Cross Origin Resource Sharing with Credentials Besides * is too permissive and would defeat use of credentials. So set http://localhost:3000 or http://localhost:8000 as the allow origin header.