Angular 5下如何通过拦截器添加授权及自定义HTTP请求头

首先得帮你理清为什么会出现这个现象：当你发送跨域请求且携带了非"简单请求头"（比如你自定义的authkey、deviceid，甚至Content-Type设为application/json时也算）时，浏览器会自动先发送一个OPTIONS预检请求，把这些自定义头放在access-control-request-headers字段里，用来询问服务器："我接下来要带这些头发送请求，你允许吗？"

要让这些头直接出现在实际请求的请求头里，需要前端拦截器正确配置 + 后端服务器配合设置CORS响应头，两者缺一不可：

一、前端Angular拦截器的正确实现 #

确保你的拦截器在所有请求（包括预检的OPTIONS请求）中都添加自定义头，避免重复或不必要的处理：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 克隆请求并添加自定义头
    const modifiedReq = req.clone({
      setHeaders: {
        'authkey': '你的授权值',
        'deviceid': '你的设备ID',
        'Content-Type': 'application/json' // 按需添加
      }
    });

    // 传递修改后的请求
    return next.handle(modifiedReq);
  }
}

注意：Angular拦截器会自动拦截OPTIONS请求，给预检请求带上这些头是正常流程，它用来告知服务器后续实际请求要携带的头信息。

二、后端服务器必须配置CORS允许这些头 #

这是最关键的一步！如果后端没有返回对应的CORS响应头，浏览器在预检通过后，也不会在实际请求中带上这些自定义头。

你需要在后端的CORS配置中添加以下响应头：

• Access-Control-Allow-Origin: 设置为允许的前端域名（生产环境不建议用*）
• Access-Control-Allow-Headers: 必须包含你所有的自定义头，比如authkey, deviceid, Content-Type
• Access-Control-Allow-Methods: 列出允许的请求方法（比如GET, POST, PUT, DELETE, OPTIONS）

举几个常见后端的配置示例：

1. Node.js/Express #

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

const corsOptions = {
  origin: '你的前端域名',
  allowedHeaders: ['authkey', 'deviceid', 'Content-Type'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
};

app.use(cors(corsOptions));

2. Java/Spring Boot #

在配置类中添加CORS映射：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("你的前端域名")
                .allowedHeaders("authkey", "deviceid", "Content-Type")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS");
    }
}

三、验证效果 #

完成配置后重新发送请求：

1. 浏览器仍会先发送OPTIONS预检请求，此时access-control-request-headers里依然会包含你的自定义头，这是正常流程
2. 服务器返回的OPTIONS响应中，Access-Control-Allow-Headers会包含你配置的所有头
3. 接下来浏览器发送的实际请求（比如GET/POST）中，你的authkey、deviceid等头就会直接出现在请求头列表里，不再只存在于access-control-request-headers中

内容的提问来源于stack exchange，提问作者Dinesh N.K