Угловая проблема с логином

Question

Я новичок в Angular 7. Я работаю в проекте Angular 7. У меня есть login компонент, как показано ниже

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"));
    }
}

Я не могу войти. Я получаю сообщение об ошибке, как показано ниже

Моя сетевая вкладка похожа на

Может ли кто-нибудь помочь мне решить эту проблему?

Answer 1

Ваша цель в proxy.conf должна быть http://alasr.com, а не localhost: 4200.

То, что происходит - опция --proxy-config будет обрабатывать http://alasr.com так, как будто она работает на том же порту, что и ваш angular, который является localhost: 4200. Таким образом, не возникнет проблема перекрестного происхождения.

Кстати, вы можете использовать скрипт npm 'start' для передачи файла proxy.conf параметру --proxy-config

Answer 2

Попробуйте это

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

Answer 3

Вы не можете получить доступ к конечным точкам сервера из-за проблемы совместного использования ресурсов CORS-Cross. Вы можете проверить эту ссылку для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Чтобы исправить эту проблему в angular, вам нужно использовать опцию --proxy-config с вашей командой ng serve. Сначала вам нужно создать JSON-файл proxy.conf.json и добавить содержимое ниже:

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

Я предполагаю, ваш бэкэнд работает в URL http://alasr.com, а база URL /al-asr.

Также в вашем httpClient передайте URL, как это

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

Теперь запустите сервер с приведенной ниже командой, чтобы исправить эту проблему:

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