Angular向Flask后端传递日期出现400错误的解决咨询

你的400 Bad Request错误根源很明确：前端发送的数据格式和Flask后端期望的完全不匹配。

问题分析 #

Flask后端的代码里，request.get_json()接收的是一个包含date字段的JSON对象（比如你用Postman测试的{"date": "2018-01-27"}），然后通过get_date['date']提取日期值。但你当前从Angular组件里传递的是单纯的日期字符串"2018-01-27"（也就是this.model.formatted的值），后端尝试把这个字符串当成JSON对象解析时，自然找不到date字段，直接触发JSON解析失败，返回400错误。

解决方案 #

只需要把前端发送的数据包装成后端期望的对象格式即可，分两步调整：

1. 修改组件的getData()方法，将日期字符串包装为包含date字段的对象：

getData(){
    // 按照后端期望的结构包装数据
    const requestPayload = { date: this.model.formatted };
    this.http.getData(requestPayload).subscribe(result => { this.data = result; });
    console.log(requestPayload); // 此时控制台会输出 {date: "2018-01-27"}，和Postman测试的格式一致
}

2. 确保Angular请求头正确（可选但推荐）
   Angular的Http.post默认会设置Content-Type: application/json，但如果你的项目有特殊配置，可以显式添加请求头来确保后端能正确识别JSON格式：

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

@Injectable()
export class RequestService {
    // 定义JSON请求头
    private jsonHeaders = new Headers({ 'Content-Type': 'application/json' });
    
    constructor(private http:Http) { }
    
    getData(model): Observable<any>{
        // 传递headers参数确保请求格式正确
        return this.http.post("http://127.0.0.1:5000/schedule", model, { headers: this.jsonHeaders })
        .map((response:Response)=> response.json());
    }
}

这样调整后，前端发送的请求体就和你用Postman测试的完全一致了，Flask后端就能正常解析date字段，不会再返回400错误。

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