Angular服务预检API错误：带授权头POST请求返回无效重定向

看起来你在Angular里发送带授权头的POST请求时踩了个常见的坑，我来帮你理清楚问题出在哪，以及怎么修复：

核心问题分析 #

你的代码里犯了一个关键错误：把请求头和请求体的配置当成了POST的请求体发送。Angular的HttpClient.post方法参数顺序是url、requestBody、options，你之前把包含headers和data的config对象转成JSON作为请求体发出去了，导致真正的请求头根本没被设置，这也触发了浏览器的预检请求错误（Response for preflight is invalid (redirect)）。

修正后的代码 #

下面是调整后的正确代码，我会标注关键修改点：

import {Injectable} from '@angular/core';
// 记得导入HttpHeaders
import {HttpClient, HttpHeaders} from '@angular/common/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SearchService {
  constructor(private http: HttpClient) {}

  getSearch(searchObj: {}) {
    // 1. 创建HttpHeaders对象，存放授权头和内容类型
    const httpHeaders = new HttpHeaders({
      'Authorization': 'Basic bTA5NDRpb25idXMuYXTVNAMjAxNw==',
      // 如果你发送的是JSON数据，这里应该用application/json（HttpClient会自动序列化对象）
      // 除非服务器明确要求text/plain，否则不建议用这个值
      'Content-Type': 'application/json'
    });

    // 2. 构建请求选项，把headers放进去
    const requestOptions = {
      headers: httpHeaders
    };

    console.log("searchObj", searchObj);
    // 3. 正确调用post：url + 请求体 + 选项
    return this.http.post('http://service/getHistoricEvents', searchObj, requestOptions)
      .map(res => {
        console.log(res);
        return res; // 建议返回响应，方便调用该方法的组件处理数据
      });
  }
}

额外需要注意的点 #

1. 预检请求错误的深层原因：当你发送带自定义头（比如Authorization）的跨域请求时，浏览器会先发送OPTIONS预检请求。如果后端服务器没有正确配置CORS（跨域资源共享），比如没有允许OPTIONS方法、没有放行Authorization头，或者把OPTIONS请求重定向了，就会出现这个错误。你需要确保后端：

   • 允许OPTIONS请求方法
   • 设置Access-Control-Allow-Headers: Authorization, Content-Type
   • 设置Access-Control-Allow-Origin为你的前端域名（生产环境不要用*）

2. Content-Type的选择：如果你的searchObj是JSON对象，用application/json就好，HttpClient会自动帮你把对象转成JSON字符串；如果服务器确实要求接收纯文本，再改成text/plain，同时把searchObj转成字符串（比如JSON.stringify(searchObj)）作为请求体。

3. 测试建议：可以先用Postman直接发送请求，确认后端API本身能正常响应，排除后端的问题后再调试前端代码。

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