CODEWITHSUNDEEP
angularapitypescriptangular6
kantsverma
kantsverma

Reputation: 636

Cannot POST in angular 6

I am getting an uncertain issues with angular 6 while submitting login form.

I have setup it all in localhost and i have saved the api files in localhost root and inside the angular project folder but it does not work for anyone. Here the the API directory /api/auth.php

I am getting the error in console -> network tab i.e Cannot POST /api/auth.php

Below is my auth.service.ts files.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { map, catchError }  from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  constructor(
    private http:HttpClient
  ) { }
  getUsersDetail(userName, userPassword){
    return this.http.post('/api/auth.php', {
      userName,
      userPassword
    }, {responseType: 'text'}).pipe(
      map(data => {
          console.log(JSON.stringify(data));
      }),
      catchError(error =>{
        return throwError("Something webt wrong"+JSON.stringify(error));
      })
    ).subscribe( data => {
      console.log(data, 'is what we got from server');
    });
  }
}

Below is my login.component.html files.

<form (submit)="loginUser($event)">
    <div><input type="text" name="loginName" id="userName"></div>
    <div><input type="password" name="loginPassword" id="userPassword"></div>
    <input type="submit" value="submit">
</form>

Below is my login.component.ts files.

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';

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

  constructor(private Auth:AuthService) {}

  ngOnInit() {
  }

  loginUser(event){
    event.preventDefault();
    console.log('Here we go '+event);
    const userName     = event.target.querySelector('#userName').value;
    const userPassword = event.target.querySelector('#userPassword').value;
    console.log('Credentials '+userName+' = '+userPassword);
    this.Auth.getUsersDetail(userName, userPassword);

  }

}

Note : Its working fine when i get the login form data inside login.component.ts but i am not able to find the API file its returing 404 i think so can anyone suggest where i should need to place the API folder where it will work my localhost URL is something like this http://localhost:4200/login

Upvotes: 2

Views: 12017

Answers (2)

Ad&#225;n Escobar
Ad&#225;n Escobar

Reputation: 4813

I had a similar issue when I needed to get a page with POST instead of GET. My solution was put a rule on nginx that allow the request with POST

 location / {
            ...
            error_page 405 =200 $uri;
        }

check this for more info: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405

Upvotes: 0

federico scamuzzi
federico scamuzzi

Reputation: 3778

Usually We put the HOST of back end API in a entry of enviroment file .. so you can easly change different stage (test / qa/ stanging / prod) from you front end run locally .. without having to refactor your Services:

something like:

enviroment.ts:

export const environment = {
  production: false,
  API_URL: 'http://localhost:1048/api/'
};

then for example enviroment.staging.ts

export const environment = {
  production: true,
  API_URL: 'http://staging.mysite.com/api/'

};

and then in your services: //import your enviroment

import { environment } from '../../../environments/environment';

getUsersDetail(userName, userPassword){
    return this.http.post(environment.APIURL + '/api/auth.php', {
      userName,
      userPassword
    }, {responseType: 'text'}).pipe(
      map(data => {
          console.log(JSON.stringify(data));
      }),
      catchError(error =>{
        return throwError("Something webt wrong"+JSON.stringify(error));
      })
    ).subscribe( data => {
      console.log(data, 'is what we got from server');
    });
  }

Upvotes: 2

Related Questions