http post - how to send Authorization header

Question

How do you add headers to your http request in Angular2 RC6  I got following code   login login  String  password  String   Observable lt boolean gt        console log login       console log password       this cookieService removeAll        let headers   new Headers        headers append  Authorization   Basic YW5ndWxhci13YXJlaG91c2Utc2VydmljZXM6MTIzNDU2        this http post AUTHENTICATION ENDPOINT     grant type password amp scope trust amp username     login     amp password     password  null   headers  headers   subscribe response   gt          console log response                 some return     The problem is  that angular doesn t add Authorization header  Instead of that  in request I can see following additional headers   Access-Control-Request-Headers authorization Access-Control-Request-Method POST   and sdch added in Accept-Encoding   Accept-Encoding gzip  deflate  sdch   Unfornately there is no Authorization header  How should I add it correctly   Whole request sent by my code looks as follow   OPTIONS  oauth token grant type password amp scope trust amp username asdf amp password asdf HTTP 1 1 Host  localhost 8080 Connection  keep-alive Pragma  no-cache Cache-Control  no-cache Access-Control-Request-Method  POST Origin  http   localhost 3002 User-Agent  Mozilla 5 0  Macintosh  Intel Mac OS X 10 11 6  AppleWebKit 537 36  KHTML  like Gecko  Chrome 52 0 2743 116 Safari 537 36 Access-Control-Request-Headers  authorization Accept      Referer  http   localhost 3002 login Accept-Encoding  gzip  deflate  sdch Accept-Language  en-US en q 0 8 pl q 0 6

User · Answer

I had the same issue  This is my solution using angular documentation and firebase Token   getService       const accessToken this afAuth auth currentUser getToken   then res  gt     const httpOptions         headers  new HttpHeaders          Content-Type     application json          Authorization   res               return this http get  Url  httpOptions       subscribe res   gt  console log res

User · Answer

Ok  I found problem   It was not on the Angular side  To be honest  there were no problem at all   Reason why I was unable to perform my request succesfuly was that my server app was not properly handling OPTIONS request   Why OPTIONS  not POST  My server app is on different host  then frontend  Because of CORS my browser was converting POST to OPTION  http   restlet com blog 2015 12 15 understanding-and-using-cors   With help of this answer  Standalone Spring OAuth2 JWT Authorization Server   CORS  I implemented proper filter on my server-side app   Thanks to  Supamiu - the person which fingered me that I am not sending POST at all

User · Answer

I believe you need to map the result before you subscribe to it  You configure it like this     updateProfileInformation user  User        var headers   new Headers        headers append  Content-Type   this constants jsonContentType        var t   localStorage getItem  accessToken        headers append  Authorization    Bearer     t      var body   JSON stringify user        return this http post this constants userUrl    UpdateUser   body    headers  headers           map  response  Response    gt            var result   response json            return result                  catch this handleError         subscribe        status   gt  this statusMessage   status        error   gt  this errorMessage   error             gt  this completeUpdateUser

User · Answer

If you are like me  and starring at your angular ionic typescript  which looks like      getPdf endpoint  string   Observable lt Blob gt        let url   this url         endpoint      let token   this msal accessToken      console log token       return this http post lt Blob gt  url          headers  new HttpHeaders                       Access-Control-Allow-Origin    https   localhost 5100              Access-Control-Allow-Methods    POST              Content-Type    application pdf              Authorization    Bearer     token             Accept                                responseType  ResponseContentType Blob                  And while you are setting options but can t seem to figure why they aren t anywhere    Well   if you were like me and started this post from a copy paste of a get  then     Change to     getPdf endpoint  string   Observable lt Blob gt        let url   this url         endpoint      let token   this msal accessToken      console log token       return this http post lt Blob gt  url  null         lt -----  notice the null              headers  new HttpHeaders                       Authorization    Bearer     token             Accept                                responseType  ResponseContentType Blob

User · Answer

Here is the detailed answer to the question      Pass data into the HTTP header from the Angular side  Please note I am   using  Angular4 0  in the application     There is more than one way we can pass data into the headers  The syntax is different but all means the same      Option 1   const httpOptions        headers  new HttpHeaders         Authorization    my-auth-token         ID   emp UserID                 Option 2  let httpHeaders   new HttpHeaders    httpHeaders   httpHeaders append  Authorization    my-auth-token    httpHeaders   httpHeaders append  ID    001    httpHeaders set  Content-Type    application json         let options    headers httpHeaders        Option 1    return this http post this url    testMethod   body httpOptions      Option 2    return this http post this url    testMethod   body options    In the call you can find the field passed as a header as shown in the image below     Still  if you are facing the issues like    You may need to change the backend WebAPI side    Response to preflight request doesn t pass access control check  No   Access-Control-Allow-Origin   header is present on the requested resource  Origin   http   localhost 4200   is therefore not allowed access Response for preflight does not have HTTP ok status    Find my detailed answer at https   stackoverflow com a 52620468 3454221

User · Answer

you need RequestOptions   let headers   new Headers   Content-Type    application json        headers append  Authorization   Bearer     let options   new RequestOptions  headers  headers     return this http post APIname body options     map this extractData     catch this handleError     for more check this link

[rest] http post - how to send Authorization header?

Examples related to rest

Examples related to http

Examples related to authentication

Examples related to angular

Examples related to typescript