角度登录问题

Question

I am new in Angular 7. I am working in a Angular 7 project. I have a login component like below

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { TokenService } from '../../token.service'
import { Router, ActivatedRoute } from '@angular/router';
import { ServerService } from 'src/app/server.service';

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

    response: any;
    failmsg: boolean = false;
    constructor(private http: HttpClient,
        private server: ServerService,
        private Token: TokenService,
        private router: Router,
        private _router: ActivatedRoute

    ) { }

    public form = {
        grant_type: 'password',
        client_id: 2,
        client_secret: 'W5nQYuW1OFknDwiDnU96Y7dBMqTJ5jG6r6AXYk9q',
        username: null,
        password: null
    }

    headers = new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + this.handleResponse2()
    });

    login() {
        this.http.post(this.server.base_url + "login", this.form).subscribe(  //execution is not entering inside this block
            (data) => {
                this.handleResponse(data);
                this.http.get(this.server.base_url + "employees/employee/user/profile", { headers: this.headers }).subscribe(
                    (profile) => {
                        this.employeeProfile = profile;
                        if (this.employeeProfile.user_id == 1) {
                            this.router.navigate([this._router.snapshot.paramMap.get("portal") + '/home/dashboard'])
                                .then(rel => location.reload());
                        } else {
                            localStorage.setItem('employeeId', this.employeeProfile.employeeId);
                            localStorage.setItem('id', this.employeeProfile.id);
                            this.router.navigate([this._router.snapshot.paramMap.get("portal") + '/home/employee-dashboard'])
                                .then(rel => location.reload());
                        }

                    }
                )
            },
            (error) => {    //execution is entering inside this block
                console.log('hello');
                if (error) {
                    this.failmsg = true;
                }
                console.log(error);
            }
        );
    }

    employeeProfile: any;

    handleResponse(data) {
        this.Token.set(data.access_token);
        this.headers = new HttpHeaders({
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + this.handleResponse2()
        });
    }

    onClose() {}

    handleResponse2() {
        return this.Token.get();
    }

    ngOnInit() {
        localStorage.setItem('portal', this._router.snapshot.paramMap.get("portal"));
        this.server.set_base_url(this._router.snapshot.paramMap.get("portal"));
        this.server.set_base_url2(this._router.snapshot.paramMap.get("portal"));
    }
}

I can't login. I am getting error like below

My network tab is like below

Could anyone help me to fix this issue ?

Answer 1

You are not able to hit the backend endpoints because of CORS- Cross origin resource sharing issue. You can check this link for more info: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

To fix this issue in angular you need to use --proxy-config option with your ng serve command. First, you need to create a JSON file proxy.conf.json and add below content:

{
  "/al-asr": {
    "target": "http://alasr.com",
    "secure": false
  }
}

I am assuming, Your backend is running in url http://alasr.com and url base is /al-asr .

Also in your httpClient pass the url like this

this.http.get('/al-asar/api/in/v1/employees/employee/user/profile')

Now run the server with below command to fix this issue:

ng serve --proxy-config proxy.conf.json

Answer 2

Your target in proxy.conf should be http://alasr.com not localhost:4200.

What happen is --proxy-config option will treat http://alasr.com as though it is running on the same port as ur angular which is localhost:4200. So there will be no Cross Origin problem.

Btw, u can use npm 'start' script to give the proxy.conf file to the --proxy-config option

Answer 3

Try this

{
    "/api": {
        "target": "https://9c8c4aa0.ngrok.io",
        "secure": true,
        "changeOrigin": true,
        "logLevel": "debug"
    }
}