为什么将HTTP头添加到Angular HttpClient中不会发送该头部？

24 浏览
0 Comments

为什么将HTTP头添加到Angular HttpClient中不会发送该头部？

这是我的代码：\n

import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';

\n

\n

logIn(username: string, password: string) {
    const url = 'http://server.com/index.php';
    const body = JSON.stringify({username: username,
                                 password: password});
    const headers = new HttpHeaders();
    headers.set('Content-Type', 'application/json; charset=utf-8');
    this.http.post(url, body, {headers: headers}).subscribe(
        (data) => {
            console.log(data);
        },
        (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
                console.log('客户端错误发生。');
            } else {
                console.log('服务器端错误发生。');
            }
        }
    );
}

\n这是网络调试信息：\n请求方法：POST\n状态码：200 OK\n接受：application/json, text/plain, */*\n接受编码：gzip, deflate\n接受语言：en-US,en;q=0.8\n缓存控制：no-cache\n连接：保持连接\n内容长度：46\n内容类型：text/plain\n\n数据存储在\'Request Payload\'中，但我的服务器没有接收到POST的值：\n

print_r($_POST);
Array
(
)

\n我认为错误是由于在POST期间未设置头部引起的，我做错了什么？

0

3 答案

0 Comments

问题：为什么在Angular HttpClient中添加HTTP头部不会发送该头部？

原因：

问题的原因在于代码中设置了HTTP头部，但是在实际发送请求时，该头部并没有被发送。这可能是由于以下原因导致的：

1. 错误的HTTP头部设置：在代码中设置HTTP头部时，可能存在错误。可能是头部名称拼写错误，或者头部值不正确。

解决方法：

要解决这个问题，可以尝试以下方法：

1. 检查HTTP头部设置：确保在代码中正确设置了HTTP头部。检查头部名称和值是否正确拼写和设置。

2. 使用正确的方法：根据需要使用正确的HTTP方法，如GET、POST、PUT等。不同的方法可能需要不同的头部设置方式。

3. 检查HTTP请求是否成功：确保HTTP请求成功发送。可以使用浏览器开发者工具或网络监控工具来检查请求是否包含了正确的头部。

4. 检查后端接收：确保后端服务器能够正确接收并处理头部。可能需要检查后端代码，确保正确处理了请求头部。

在Angular HttpClient中添加HTTP头部时，如果头部没有被发送，可能是由于错误的头部设置导致的。要解决这个问题，需要检查头部设置的正确性，并确保后端服务器能够正确接收和处理头部。

0
0 Comments

问题出现的原因是在使用Angular HttpClient时，添加HTTP头部信息后，这些头部信息并没有被发送到服务器。

解决方法是使用以下代码添加多个参数或头部信息：

constructor(private _http: HttpClient) {}
//....
const url = `${environment.APP_API}/api/request`;
let headers = new HttpHeaders().set('header1', hvalue1); // 创建头部对象
headers = headers.append('header2', hvalue2); // 添加新的头部信息，创建新的对象
headers = headers.append('header3', hvalue3); // 添加另一个头部信息
let params = new HttpParams().set('param1', value1); // 创建参数对象
params = params.append('param2', value2); // 添加新的参数，创建新的对象
params = params.append('param3', value3); // 添加另一个参数
return this._http.get(url, { headers: headers, params: params })

然而，这种方法似乎也不起作用。虽然可以添加头部信息，并且它们会显示在`lazyUpdate`属性中，但最终在通过订阅有效的请求时会导致`CreateListFromArrayLike`异常崩溃。

为了添加多个头部信息，可以使用以下代码：

headers: HttpHeaders = new HttpHeaders({
    'Application-Id': this.appId,
    "REST-API-Key": this.apiKey,
    "Content-Type": "application/json"
});

0
0 Comments

问题出现的原因是因为HttpHeaders类的实例是不可变的对象，调用类方法会返回一个新的实例。解决方法是通过set方法设置HTTP头部，或者直接传入一个对象映射作为参数。

具体的解决方法如下：

1. 使用set方法设置单个头部：

let headers = new HttpHeaders();
   headers = headers.set('Content-Type', 'application/json; charset=utf-8');

或者

const headers = new HttpHeaders({'Content-Type':'application/json; charset=utf-8'});

2. 使用set方法设置多个头部：

let headers = new HttpHeaders();
   headers = headers.set('h1', 'v1').set('h2','v2');

或者

const headers = new HttpHeaders({'h1':'v1','h2':'v2'});

3. 从Angular 5.0.0-beta.6开始，可以直接传入一个对象映射作为参数：

http.get('someurl',{
      headers: {'header1':'value1','header2':'value2'}
   });

另外，某些情况下在Angular 6中设置了头部后仍然出现了错误Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:4200' is therefore not allowed access. The response had HTTP status code 403.，但没有给出具体解决方法。

还某些情况下从Angular 6.1.7开始不能使用.set()方法，但这个说法是错误的。

总之，正确的解决方法是使用set方法设置HTTP头部，并注意参数的顺序。

0