How to set beforesend header in angular 2

1
votes

I am new to angular2. I want to make a http post using angular2.Ajax request for the same is- 

 $.ajax({
    url: apiUrl,
    type: 'Post',
    dataType: "json",
    data: request,   
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization-ApiKey", 'Ak12mr27Xwg@d89ul');
    },
    success: function (response) {
        if (response.ErrorCode != 0) {
           alert(response.ErrorMessage)
        }
        else {
        }
    },
    error: function (a) {
        alert('Invalid Action.');
       }
    });

Actualy, i don't know how to set beforesend header in angular2. I tried this but nothing works. its giving-

Failed to execute 'open' on 'XMLHttpRequest': Invalid URL" and
Response with status: 500 Internal Server Error for URL: http://111.118.241.110/B****i/api/R*****1/Login

My angular2 code for post api-

 import { Injectable } from '@angular/core';
    import { Http, Headers, Response, RequestOptions } from '@angular/http';
    import {Observable} from 'rxjs/Rx';
    import 'rxjs/add/operator/map'

    @Injectable()
    export class AuthenticationService {
        constructor(private http: Http) { }
        login(username: string, password: string) {
            var headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');
            headers.append('Authorization-ApiKey','Ak12mr27Xwg@d89ul');
            headers.append('Accept', 'application/json');            
            let options = new RequestOptions({ headers: headers });

            return this.http.post('http://111.118.241.110/B****i/api/R******1/Login', {
    UserName: username, Password: password } , options)
    .map((response: Response) => {

            let user = response;

         });

       }
    }

I am very sure ,handled all CORS enable related issue for API.what could be the solution. P.S: Its working fine for GET request..

3
angularxmlhttprequest

3 Answers

1
votes

This worked for me, I do hope it helps...

import { Injectable } from '@angular/core';
import { Http, Response, Headers, HttpModule, RequestOptions } from '@angular/http';

@Injectable()
export class ClassName{
    public url:string="url";

    constructor(private _http:Http) { }

    authenticate(userName, password){
      console.log("user:" + userName);
      console.log("pass:" + password);
      var authdata = window.btoa(userName + ':' + password);
      var header = new Headers();
      header.append('Authorization', 'Basic ' + authdata);
      header.append('contentType','application/json; charset=utf-8');
      header.append('Accept','application/json');
      header.append('Access-Control-Allow-Origin', '*');
      var option = new RequestOptions();
      option.headers = header;

      console.log(header);
        return this._http.get(this.url + 'Method', option)
        .map((response:Response)=>response.json());
    }
}
0
votes

Last answer worked for me! But I improve it using tokens:

.....
authenticate(token){
  console.log("user:" + token);
  var authdata = window.btoa(token+ ':');
  console.log("authdata:" + authdata);
  var header = new Headers();
  header.append('Authorization', 'Basic ' + authdata);
  header.append('contentType','application/json; charset=utf-8');
  header.append('Accept','application/json');
  header.append('Access-Control-Allow-Origin', '*');
  var option = new RequestOptions();
  option.headers = header;

  console.log(header);
    return this.http.get(this.baseUrl, option)
    .map((response:Response)=>response.json());
}

.....

0
votes

Use of Header is depreciated in ANGULAR 6.
Use HttpHeader:

import { HttpHeaders, HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {

      // Setting up the header
      this.header = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
      this.header = this.header.append('Accept', 'application/json');
      this.header = this.header.append('Authorization', yourAuthVariable);

}