Angular 4中如何设置独立的Authorisation请求头（非预检头内）

我来帮你解决这个问题——你看到的Access-Control-Request-Headers:Authorisation是浏览器CORS预检请求的正常内容，并非最终请求的头信息。要让实际请求中独立携带Authorisation: value头，需要前端正确配置，同时后端必须支持CORS预检。

为什么会出现这种情况？ #

当你的前端（localhost:4200）向跨域地址（192.168.1.190:58603）发送带自定义头（比如Authorisation）的请求时，浏览器会先发送一个OPTIONS预检请求，用来询问服务器：「我接下来要发送带这些头的请求，你允许吗？」。这个预检请求里就会包含Access-Control-Request-Headers:Authorisation，告诉服务器即将使用的自定义头。

只有服务器响应允许后，浏览器才会发送实际的GET请求，此时实际请求里就会带上你想要的Authorisation: accesstoken头。

解决步骤 #

1. 前端Angular 4配置请求头 #

推荐用全局拦截器来统一添加Authorisation头，这样所有请求都会自动带上；也可以针对单个请求单独设置。

方法一：全局HTTP拦截器（推荐）

创建一个拦截器类，每次请求时自动添加头：

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 从本地存储或服务中获取你的token
    const authToken = localStorage.getItem('accessToken');
    
    // 克隆请求并添加Authorisation头（注意拼写和你的需求一致）
    const authorisedRequest = request.clone({
      headers: request.headers.set('Authorisation', authToken)
    });
    
    // 传递修改后的请求
    return next.handle(authorisedRequest);
  }
}

然后在app.module.ts中注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor'; // 替换成你的拦截器路径

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 你的模块 */],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 允许多个拦截器
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

方法二：单个请求添加头

如果只需要在特定请求中添加头，可以直接在HttpClient请求中设置：

import { HttpClient, HttpHeaders } from '@angular/common/http';

// 组件/service中的代码
const authHeaders = new HttpHeaders().set('Authorisation', 'accesstoken');

this.http.get('http://192.168.1.190:58603/your-api-endpoint', { headers: authHeaders })
  .subscribe(response => {
    // 处理响应数据
  }, error => {
    // 处理错误
  });

2. 后端必须响应CORS预检请求 #

这是最关键的一步！如果服务器没有正确响应OPTIONS预检请求，浏览器会阻止实际的GET请求，你也看不到Authorisation头出现在最终请求里。

服务器需要返回以下响应头：

• Access-Control-Allow-Origin: http://localhost:4200（指定允许的前端域名，生产环境不要用*）
• Access-Control-Allow-Methods: GET, OPTIONS（包含你使用的请求方法，以及OPTIONS预检方法）
• Access-Control-Allow-Headers: Authorisation（明确允许自定义的Authorisation头）
• Access-Control-Max-Age: 3600（可选，缓存预检结果的时间，减少重复OPTIONS请求）

举个Node.js/Express的示例：

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

// CORS中间件
app.use((req, res, next) => {
  // 允许前端域名跨域
  res.header('Access-Control-Allow-Origin', 'http://localhost:4200');
  // 允许的请求方法
  res.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
  // 允许的自定义头
  res.header('Access-Control-Allow-Headers', 'Authorisation');
  
  // 处理OPTIONS预检请求，直接返回200状态码
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  
  next();
});

// 你的API路由
app.get('/your-api-endpoint', (req, res) => {
  // 这里可以通过req.headers.authorisation拿到token
  res.send('Success');
});

app.listen(58603, () => {
  console.log('Server running on port 58603');
});

验证结果 #

配置完成后，打开浏览器开发者工具的「Network」标签：

1. 先会看到一个OPTIONS请求，响应头包含上面提到的CORS允许头；
2. 紧接着会发送实际的GET请求，此时查看这个GET请求的请求头，就能看到独立的Authorisation: accesstoken了。

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