Question

当我尝试执行此http请求时，我正在部署和 angular 6应用程序，该应用程序与 localhost 中的 tomcat 服务器一起使用< / p>

const newArray= [
{ id: 1, value='123', color: 'rgba(52, 182, 193, 0.7)' },
{ id: 2, value='456', color: 'rgba(56, 206, 33, 0.7)' },
{ id: 3, value='457', color: 'rgba(208, 88, 216, 0.7)' },
{ id: 4, value='586', color: 'rgba(206, 66, 47, 0.7)' },

everinging效果很好，但是当我添加标题字段

时

this.http
      .post<LoginResult>( API_URL + '/login', JSON.stringify(json)/*, { headers: myHeader }*/).pipe(
        catchError(this.handleError('get-token', []))).subscribe((response) => {
      if(response['result_code'] == 'result_ok') {
        this.auth.doSignIn(response['token'], response['name']);
        this.router.navigate(['user_manager']);
        return true;
      }else {
        return false;
      }
    });

这是我的输出错误：

let myHeader = new HttpHeaders().append("Authorization", 'Basic' + this.session.getAccessToken());

    this.http
      .post<LoginResult>( API_URL + '/login', JSON.stringify(json), { headers: myHeader }).pipe(
        catchError(this.handleError('get-token', []))).subscribe((response) => {
      if(response['result_code'] == 'result_ok') {
        this.auth.doSignIn(response['token'], response['name']);
        this.router.navigate(['user_manager']);
        return true;
      }else {
        return false;
      }
    });

我还检查了请求是否未到达我的tomcat服务器，该请求之前已被阻止，不允许Angular检查响应标头

谢谢您的帮助

Answer 1

我为您提供了一个通用的答案，因为您没有提到服务器端代码是用哪种语言编写的。
您应该提供服务器代码的标头。提供Access-Control-Allow-Origin标头，其值为localhost:4200，可以解决您的问题。或者，如果您想允许每个原点，则将其值从localhost:4200更改为*。

阅读所有评论后，我为您做了一些更改。

使用let myHeader = new HttpHeaders().append("Authorization", 'Basic' + this.session.getAccessToken());更改此代码const myHeader = new HttpHeaders({'Authorization': 'Bearer ' + localStorage.getItem('api_token')}); 并以

发出您的帖子请求

this.http
      .post<LoginResult>( API_URL + '/login', json, myHeader).pipe(
        catchError(this.handleError('get-token', []))).subscribe((response) => {
      if(response['result_code'] == 'result_ok') {
        this.auth.doSignIn(response['token'], response['name']);
        this.router.navigate(['user_manager']);
        return true;
      }else {
        return false;
      }
    });

Answer 2

您需要在tomcat服务器上配置CORS。

您需要告诉tomcat允许应用程序发送哪些标头，以便将其包含在预检响应中：

<init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Authorization,Content-Type,...</param-value>
</init-param>

看看

cors.allowed.methods在“ CORS过滤器”部分下面： https://tomcat.apache.org/tomcat-7.0-doc/config/filter.html

Angular 6 Http请求失败，并带有授权标头

2 个答案: