Angular 2，Http 和 Not setting Content-Type "application/json"

27 浏览
0 Comments

Angular 2，Http 和 Not setting Content-Type "application/json"

我正在尝试使用Angular 2（2.0.0-rc.1）在服务中编写一个简单的Check Login方法。当我尝试将content-type设置为application/json时，发送到我的Web API后端时它从未设置头部。

import { Injectable } from '@angular/core';
import { HTTP_PROVIDERS, Http, Response, Headers, RequestOptionsArgs, RequestMethod, Request, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Other Modules Left out for Security } from 'Hidden';
@Injectable()
export class LoginService {
  private _http: Http;
  constructor(http: Http) {
    this._http = http;
  }
  CheckLogin(model: CredentialModel) {
    let url = 'http://localhost:51671/api/Login';
    let data = JSON.stringify(model);        
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    let requestOptions = new RequestOptions({
      method: RequestMethod.Post,
      url: url,
      headers: headers,
      body: data
    });
    console.log(requestOptions);
    console.log(data);
    return this._http.post(url, data, requestOptions);
  }
}

来自Web API的请求

OPTIONS /api/Login HTTP/1.1

Host: localhost:51671

Connection: keep-alive

Pragma: no-cache

Cache-Control: no-cache

Access-Control-Request-Method: POST

Origin: http://localhost:5616

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2754.0 Safari/537.36

Access-Control-Request-Headers: content-type

Accept: */*

DNT: 1

Referer: http://localhost:5616/

Accept-Encoding: gzip, deflate, sdch

Accept-Language: en-US,en;q=0.8

使用PostMan使用完全相同的数据可以正常工作！看起来在Angular 2中使用POST方法发送application/json存在问题。

任何有助于解决此问题的帮助都将非常有用。愿意尝试任何建议。

0

3 答案

0 Comments

问题的原因是在Angular 2中，使用Http类的post方法时，需要传入一个RequestOptionsArgs类型的对象作为第三个参数，而不是RequestOptions类型的对象。

解决方法是在post方法中传入一个包含headers属性的对象，可以通过以下方式进行字面量的设置：

return this._http.post(url, data, { headers: headers });

需要注意的是，要确保在代码中导入Headers模块。

0
0 Comments

Angular 2中，当使用Http进行POST请求时，如果不设置Content-Type为"application/json"，可能会出现问题。下面将详细介绍问题的原因以及解决方法。

问题的原因：

在Angular 2中，当使用Http进行POST请求时，如果不设置Content-Type为"application/json"，默认的Content-Type为"application/x-www-form-urlencoded"。这可能导致服务器无法正确解析请求的数据。

解决方法：

为了解决这个问题，需要手动设置请求的Headers，将Content-Type设置为"application/json"。以下是具体的解决方法：

1. 首先，在Angular 2中，需要使用HttpHeaders类来创建Headers对象。我们可以通过指定键值对的形式来设置Headers的内容。

let headers = new HttpHeaders({
    "Content-Type": "application/json",
    "Accept": "application/json"
});

这里我们设置了两个Headers，一个是Content-Type，值为"application/json"，另一个是Accept，值也为"application/json"。这样设置后，我们就可以确保请求的数据以JSON格式发送，并且告诉服务器我们希望接收的响应数据也是JSON格式。

2. 接下来，我们需要在进行POST请求时，将设置好的Headers传递给Http请求的options参数。

this.http.post("apiUrl", data, {headers: headers})

在这个例子中，我们使用了this.http.post方法进行POST请求。其中，"apiUrl"是我们要请求的API的URL，data是要发送的数据，{headers: headers}是请求的options参数，我们将设置好的Headers传递给了options参数。

通过以上的设置，我们就可以确保在Angular 2中使用Http进行POST请求时，正确设置了Content-Type为"application/json"，解决了可能出现的问题。

希望本文对你理解Angular 2中Http请求设置Content-Type为"application/json"的问题有所帮助。

0
0 Comments

在Angular 2中，可以使用RequestOptionsArgs接口来指定RequestOptions的值。

当我们使用Angular 2的Http模块发送HTTP请求时，有时候可能会遇到一个问题，即在不设置Content-Type为"application/json"的情况下，无法正确解析HTTP请求的问题。

这个问题的出现原因是，Http模块默认将请求的Content-Type设置为"application/json"。如果我们不手动设置Content-Type，那么服务器在接收到请求时可能无法正确解析请求的内容。

解决这个问题的方法是，我们需要手动设置请求的Content-Type为"application/json"。

以下是一个示例代码，展示了如何手动设置Content-Type为"application/json"：

import { Http, Headers, RequestOptions } from '@angular/http';
// 创建请求头
let headers = new Headers({ 'Content-Type': 'application/json' });
// 创建请求参数
let options = new RequestOptions({ headers: headers });
// 发送请求
http.post(url, data, options)
    .subscribe(
        response => {
            // 处理响应
        },
        error => {
            // 处理错误
        }
    );

通过以上代码，我们创建了一个Headers对象，并将Content-Type设置为"application/json"。然后，我们将这个Headers对象传递给RequestOptions对象，并将RequestOptions对象传递给http.post方法，以发送带有正确Content-Type的HTTP请求。

通过手动设置Content-Type为"application/json"，我们解决了在使用Angular 2的Http模块发送HTTP请求时无法正确解析请求的问题。

0