Question

我正在开发Angular项目...后端运行正常。.但是我无法获得angular ..的响应。我在通过邮递员使用时包含了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));
          })
      }

    }

我已在Express后端的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');
});

调用时出现角度HTTP GET Cors错误可观察到

0 个答案: