角度不发送请求标头值答案

【问题标题】：Angular not sending request header values角度不发送请求标头值
【发布时间】：2019-09-25 22:10:31
【问题描述】：

我正在使用 django rest 框架作为后端，并尝试使用请求标头中的令牌以 angular 身份验证请求，但 angular 没有发送任何标头值。我已经尝试了所有向请求添加标头的方法

test(){
    //var headers = new HttpHeaders();
     //headers.append('Authorization',':Token '+ token);
    let token='Token '+'d7dd1e453bae5086e33243b9adca5b63d2d927fb8';

    const httpOptions = {
      headers: new HttpHeaders({

        'Authorization':'Token d7dd1e453bae5086e33243b9adca5b63d2d927fb8',
        'Content-Type': 'application/json', 
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers':'X-Requested-With'

      })
    };
    console.log(token);
    this.http.get('http://localhost:8003/hello/', httpOptions).subscribe(

      response=>{console.log(response);}

    );
  }

访问控制请求标头：访问控制允许标头、访问控制允许来源、授权、内容类型访问控制请求方法：GET DNT：1 来源： http://localhost:4001推荐人：http://localhost:4001/

【问题讨论】：

所以为了澄清，我们在这里查看 Angular 代码对吗？我认为您的 Angular 应用程序不应该设置 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers 标头。您的服务器应该在OPTIONS 或任何GET 上返回这些。除此之外，您能否发布来自您的 Angular 应用程序正在检索的服务器的实际响应？似乎您以错误的方式获取了 CORS 标头。
我试过没有设置 Access-Control-Allow-Origin、Access-Control-Allow-Headers。它不起作用
请尝试阅读我为帮助您而写的全文。这与删除这两个标头无关，而是与您尝试发送内容时服务器给出的完整响应有关。我们谈到的这两个标头不应该添加到客户端，而是添加到服务器上。您的服务器应该告诉客户端可以发送Authorization 标头。您的服务器日志可能会显示类似的内容。

标签： javascript angular typescript django-rest-framework

【解决方案1】：

我在最近的一个项目中遇到了同样的问题，通过设置这样的标题设法解决了这个问题：

let headers = new HttpHeaders().set('Authorization', 'Token ...')
                               .append('Content-Type', 'application/json')
                               .append('Access-Control-Allow-Origin', '*')
                               .append('Access-Control-Allow-Headers', 'X-Requested-With');

 // now either:
 const httpOptions = { headers: headers };
 this.http.get('http://localhost:8003/hello/', httpOptions);

 // or
 this.http.get('http://localhost:8003/hello/', { headers: headers });

问候。

【讨论】：

我试过做同样的事情，但仍然没有发送任何标头值。
让令牌='令牌'+'d7dd1e453bae5086e33243b9adca5b63d2d927fb8'; let headers = new HttpHeaders().set('Authorization', token) .append('Content-Type', 'application/json') .append('Access-Control-Allow-Origin', '*') .append ('Access-Control-Allow-Headers', 'X-Requested-With');控制台.log（令牌）； this.http.get('localhost:8003/hello', { headers: headers }).subscribe( response=>{console.log(response);} ); }
您可能应该更新您的问题以显示 1) 用于接收请求的后端配置和 2) 请求本身在浏览器的网络控制台中，这对修复有很大帮助您的问题.. 正如您对问题本身的评论中所述，不应在前端设置那些“访问控制”标题。