Angular 4 POST请求报415（不支持的媒体类型）错误求助

我来帮你梳理下代码里的关键问题，再给你一套能正常工作的实现方案：

1. 先揪出代码里的小错误 #

你当前代码里用的Headers是旧版HttpModule的API，而HttpClientModule对应的是HttpHeaders，必须从@angular/common/http导入，否则会导致Content-Type头设置无效。另外，HttpClient的post方法会自动帮你把JS对象序列化为JSON，完全不需要手动调用JSON.stringify()，手动转换反而可能引发格式问题。

2. 修正后的完整服务代码 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'; // 导入正确的HttpHeaders

@Injectable()
export class NewServiceService {
  baseUrl = "http://localhost:33969/api/";
  
  // 正确创建请求头配置
  private httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  constructor(private http: HttpClient) { } // 注入HttpClient实例

  // 封装POST请求方法
  sendStudentData() {
    const studentObj = { name:"A", cgpa: 3 };
    // 直接传入对象，HttpClient自动完成JSON序列化
    return this.http.post(`${this.baseUrl}your-endpoint-name`, studentObj, this.httpOptions);
  }
}

3. 组件中调用服务的正确姿势 #

别忘了在组件里订阅Observable才能真正触发请求：

import { Component } from '@angular/core';
import { NewServiceService } from './new-service.service';

@Component({
  selector: 'app-root',
  template: '<button (click)="submit()">提交数据</button>'
})
export class AppComponent {
  constructor(private studentService: NewServiceService) { }

  submit() {
    this.studentService.sendStudentData().subscribe(
      res => console.log('请求成功返回:', res),
      err => console.error('请求出错:', err)
    );
  }
}

4. Web API端的配套注意点 #

确保你的Web API接口能正确接收JSON数据：

• 定义匹配的接收模型：

  public class StudentDto
  {
      public string Name { get; set; }
      public decimal Cgpa { get; set; }
  }
  

• 接口方法标记[FromBody]来解析JSON：

  [HttpPost]
  public IActionResult CreateStudent([FromBody]StudentDto student)
  {
      if (!ModelState.IsValid) return BadRequest(ModelState);
      // 后续业务逻辑
      return Ok("数据接收成功");
  }
  

• 如果Angular和API不在同一端口，记得在API端配置CORS，否则浏览器会拦截跨域请求。

内容的提问来源于stack exchange，提问作者Jaowat Raihan