Угловой HTTP GET Cors Ошибка при вызове становится заметным - PullRequest
0 голосов
/ 22 апреля 2019

Я занимаюсь разработкой Angular Project ... Бэкэнд работает должным образом ... Но я не могу получить ответ в угловом формате. Я включил ответ json при использовании через почтальон (ниже)

{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdHJVc2VySUQiOiJBRE1JTiIsImlhdCI6MTU1NTk0NzI3MywiZXhwIjoxNTU1OTU4MDczfQ.6NA_8hh6bXQ83UC5EwizKca_uo9VCxTvZR-aS9MMcmE",
"auth":true}

Но вместо того, чтобы регистрировать ответ json ... он показывает ошибку cors ... Я включил ошибку, которую я получаю из консоли (ниже)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/login/ADMIN/QSKJBCVIHQ/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/login/ADMIN/QSKJBCVIHQ/. (Reason: CORS request did not succeed).[Learn More]
ERROR 
Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "http://localhost:5000/login/ADMIN/QSKJBCVIHQ/", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:5000/login/ADMIN/QSKJBCVIHQ/: 0 Unknown Error", error: error }
core.js:15724
    import { Observable } from 'rxjs';
    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    import { HttpErrorResponse, HttpClient } from '@angular/common/http';
    import { Form, FormBuilder } from '@angular/forms';
    import { CommonService } from '../CommonService/common.service';

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

      LoginForm: Form;
      private router: Router;
      strIP: string;
      loginStatus: boolean;
      loginTokenMessage: any;

      constructor(private ClsCommon: CommonService, private http: HttpClient) {
        this.http.get<{ ip: string }>('https://jsonip.com')
          .subscribe(data => {
            console.log('ip', data);
            this.strIP = data.ip;

          })
      }

      ngOnInit() {

      }
      private loginApiURL: string;

      OnSubmit(UserID: string, UserPwd: string) {
        this.loginApiURL = 'http://localhost:5000/login/' + UserID.toUpperCase() + '/' + UserPwd.toUpperCase() + '/'
        this.http.get<Observable<{ token: string, auth: boolean }>>(this.loginApiURL, { headers: { 'Content-Type': 'application/json' } })
          .subscribe(response => {
            console.log(JSON.stringify(response));
          })
      }

    }

Я добавил необходимый заголовок в app.js экспресс-бэкэнда

    app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;

  res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Credentials', true);

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...