HttpParams doesn't work in angular getting 502 error

Question

I am using angular 8

I am using HttpParams in Sending Data to the Server via Post method
I am getting 502 status code error, sending data via HttpPrams

ERROR

HttpErrorResponse {headers: HttpHeaders, status: 502, statusText: "Bad Gateway", url: "http://central-portal-app-alb-1565375077.ap-south-1.elb.amazonaws.com/api/v1/user/login", ok: false, …} headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} status: 502 statusText: "Bad Gateway"

here is my service file code

service.ts

@Injectable()
export class RestService {
  baseUrl = environment.baseUrl;
  login =  this.baseUrl + 'user/login';


  constructor(private http: HttpClient) {

  }

userlogin(userid, smpassword) {

const params = new HttpParams()
.set('user_id', userid)
.set('sm_password', smpassword);

console.log(params);


return this.http.post(this.baseUrl + 'user/login',  params.toString(),
{
  headers: new HttpHeaders({
   'Content-Type' : 'application/json'
  })
}
);

login.component.ts

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  Userlogin: FormGroup;

  constructor(private route: Router , private fb: FormBuilder , private rest: RestService) {
        this.Userlogin = this.fb.group({
          email : ['', [Validators.required , Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$') ]],
          password : ['', [Validators.required , Validators.minLength(5) ] ]
        });
  }

  // , Validators.required

  ngOnInit() { }


  login() {

    const email =  this.Userlogin.get('email').value;
    const password = this.Userlogin.get('password').value;
    this.rest.userlogin(email, password).subscribe(
      result => {
        console.log(result);
      }
    );

    //  this.route.navigateByUrl('/pendingapproval');

  }

And you're setting the content type to application/json, but you're not actually sending JSON. — JB Nizet
– JB Nizet, Commented Dec 29, 2019 at 8:53
Are you trying to send JSON, or URL-encoded data? Currently your request isn't internally consistent. Did you look at the request you're actually making? — jonrsharpe
– jonrsharpe, Commented Dec 29, 2019 at 8:54

Ibe Stanley Arua · Accepted Answer · 2019-12-29 15:47:09Z

0

Tried visiting the api endpoint on browser, check if the URL is correct, and maybe include access control allow origin in your header

answered Dec 29, 2019 at 15:47

Ibe Stanley Arua

391 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Iliyas Shaik · Accepted Answer · 2019-12-31 14:43:40Z

0

Im not sure but please check this......

This Should be your service file code

userlogin(userid, smpassword) {
const params = new HttpParams()
.set('user_id', userid)
.set('sm_password', smpassword);
console.log(params);    
return this.http.post(this.baseUrl+'user/login',JSON.stringify(params)).pipe(map((res) => {
  return res;
}));

}

This Should be your login.component.ts

     login() {
        const email =  this.Userlogin.get('email').value;
        const password = this.Userlogin.get('password').value;
        this.rest.userlogin(email, password).subscribe((result)=> {
        result = JSON.Parse(result)
            console.log(result);
          }
        );

answered Dec 31, 2019 at 14:43

Iliyas Shaik

1145 bronze badges

Collectives™ on Stack Overflow

HttpParams doesn't work in angular getting 502 error

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related