Angular 5 HTTP Post请求报错：预检请求返回无效状态码400

嗨，我看你遇到了Angular里跨域预检请求返回400错误的麻烦，这在对接第三方API或者跨域服务时特别常见，我来帮你拆解下可能的原因和解决办法。

首先得明白这个错误的本质：浏览器在发送实际的POST/GET等请求前，会先发送一个OPTIONS预检请求，用来确认服务器是否允许当前域名的跨域请求。如果这个OPTIONS请求返回400，说明服务器不认可你发送的预检参数，直接拒绝了。

常见原因及解决办法 #

1. 前端请求头配置不符合服务器要求

如果你的请求里加了自定义头（比如Content-Type: application/json），但服务器的CORS配置没允许这些头，就会触发这个错误。你可以先调整请求头，确保只使用服务器支持的字段：

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class SlackService {
  private apiEndpoint = '你的Slack API地址'; // 替换成实际地址

  constructor(private http: Http) { }

  // 示例请求方法
  postToSlack(payload: any): Observable<any> {
    // 配置符合服务器要求的请求头
    const headers = new Headers({
      'Content-Type': 'application/json' // 如果服务器不支持json，换成application/x-www-form-urlencoded
    });
    const requestOptions = new RequestOptions({ headers: headers });

    return this.http.post(this.apiEndpoint, payload, requestOptions)
      .map(this.extractResponseData)
      .catch(this.handleRequestError);
  }

  private extractResponseData(res: Response) {
    const body = res.json();
    return body || {};
  }

  private handleRequestError(error: Response | any) {
    let errorMessage: string;
    if (error instanceof Response) {
      const responseBody = error.json() || '';
      const errDetails = responseBody.error || JSON.stringify(responseBody);
      errorMessage = `${error.status} - ${error.statusText || ''} ${errDetails}`;
    } else {
      errorMessage = error.message ? error.message : error.toString();
    }
    console.error(errorMessage);
    return Observable.throw(errorMessage);
  }
}

2. 服务器端CORS配置缺失或错误

这是最常见的根源，你需要确保服务器正确处理OPTIONS请求并返回合法的CORS响应头：

• 必须返回Access-Control-Allow-Origin，值为你的前端域名（比如http://localhost:4200）或者*（生产环境不建议用*，存在安全风险）
• 如果请求用了POST/PUT等非简单方法，或者自定义了请求头，需要添加Access-Control-Allow-Methods（指定允许的HTTP方法）和Access-Control-Allow-Headers（指定允许的请求头）
• 确保OPTIONS请求直接返回200状态码

举个Node.js/Express服务器的配置示例：

const express = require('express');
const cors = require('cors');
const app = express();

// 配置CORS规则
app.use(cors({
  origin: 'http://localhost:4200', // 替换成你的Angular项目地址
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type']
}));

// 专门处理OPTIONS请求，直接返回成功
app.options('*', cors());

3. 其他可能的小问题

• API地址错误：检查你请求的URL是否拼写正确，有时候地址错误会导致服务器返回400，进而让预检请求失败
• 请求体格式不匹配：如果服务器期望的是表单格式（form-data），但你传了JSON字符串，也会触发400错误，这时候需要调整请求头和请求体的编码方式

你可以先从检查服务器的CORS配置入手，这大概率是问题所在，再核对前端的请求头和数据格式是否和服务器要求一致。

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