从'text/plain'到'application/json'的角度http发布请求内容类型

问题描述：

我试图使用POST请求从服务中获取数据。但我不能改变标题（TS不会编译）或内容类型。我得到这个错误控制台：从'text/plain'到'application/json'的角度http发布请求内容类型

状态 “：415，” 错误 “：” 不支持的媒体类型 “ ”异常“： ”org.springframework.web.HttpMediaTypeNotSupportedException“， ”消息“：” 内容类型“ text/plain的不支持”

下面是我的组件代码

import { Component, OnInit } from '@angular/core'; 
 
import { Http, Headers, Response, URLSearchParams } from '@angular/http'; 
 
import { HttpClient } from '@angular/common/http'; 
 
import 'rxjs/add/operator/map'; 
 

 
@Component({ 
 
    selector: 'app-search', 
 
    templateUrl: './search.component.html', 
 
    styleUrls: ['./search.component.css'] 
 
}) 
 
export class SearchComponent implements OnInit { 
 

 
    searchValue: any = ''; 
 

 
    constructor(private http: HttpClient) { } 
 

 
    getData() { 
 

 
    this.http.post('MY URL', 
 
    JSON.stringify({ 
 
     "q": "Achmea" 
 
    })) 
 
    .subscribe(
 
    data => { 
 
     alert('ok'); 
 
     console.log(data); 
 
    } 
 
    )

NB：用于ŧ他编码片段，因为格式不会让我发布为pre。

使用最新的角4版。也应该正确配置服务器，只接受json数据。我尝试了Angular docs中的例子，但他们都没有工作。

任何人有任何想法如何让它工作？在此先感谢。

答

使用页眉：

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

this.http.post(this.oauthUrl, JSON.stringify(postData), { 
    headers: headers 
})

'[ts] 类型'{headers：Headers; }'不能分配给类型为'{headers？：HttpHeaders;观察？：“身体”; params ?: HttpParams; reportProgress？：boolean; respons ......“。属性“标题”的类型不兼容。类型'标题'不可分配为键入'HttpHeaders'。类型'Headers'中缺少属性'标题'。' 这是我的visual studio代码在标题行上说的，并且不会编译.. – raulicious

检查是否将此添加到您的导入中： '从'@ angular/http'导入{Http，Headers，Response，RequestOptions，ResponseContentType};' –

不，这也行不通。我也有他们导入太...每一个我看到的与*有关的答案在标题部分我打破了。 – raulicious

答

正如你可以创建一个名为HTTP-config.ts文件，插入下面的代码

import {Headers} from '@angular/http'; 

export const contentHeaders = new Headers(); 
contentHeaders.append('Accept', 'application/json'); 
contentHeaders.append('Content-Type', 'application/json');

然后在服务类中的最佳方法

import {Http, RequestOptions, Headers, Response} from "@angular/http"; 
@Injectable() 
export class MyService { 
url:string = '<paste your url here>' 
getData(id: string): Observable<any> { 
    let options = new RequestOptions({headers: contentHeaders}); 
    return this.http 
    .get(this.url, options) 
    .map(this.extractData) 
    .catch(this.handleError);} 
}

在您的组件

constructor(private myService: MyService){} 

    private subscription: Subscription; 
    getData(popId: string) { 
    this.subscription = this.myService.getData() 
    .subscribe(
    (data: any) => { 
     console.log(data); 
    }, 
    error => { 
     console.log(error); 
    }); 
    }

希望有帮助。

这也是行不通的。这部分服务在vsc中完全强调。 '返回this.http 获得（this.url，期权） .MAP（this.extractData） .catch（this.handleError）;' 以及当this.myService组件页 – raulicious

实际上，你必须将您的服务注入您的组件。我更新了我的答案。如果你仍然有任何错误，请将它张贴在这里 – VithuBati

我在vsc中遇到了一个错误，它没有让代码在组件中编译该部分：'this.myService.getData（）' 我对angular很陌生，Im不确定即使在那种情况下放置我的URL。我真的只想一个非常简单的方法来实现这个工作。 – raulicious

答

在你的例子中（以及在评论中），由角度提供的两个不同的http实现混在一起。由于'@ angular/common/http'中的角色4 HttpClient可用，并且是推荐的方式。由于角度5，来自'@ angular/http'的较旧的Http甚至被标记为已弃用。

为了防止后端你必须设置你的标题以下列方式异常消息：

const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8'); 
return this.httpClient.post<T>(this.httpUtilService.prepareUrlForRequest(url), body, {headers: headers}) 
...

请从删除所有依赖“@角/ HTTP”在你的代码。只要你使用这个模块的对象，你的代码就会有问题。

从'text/plain'到'application/json'的角度http发布请求内容类型

相关推荐