Ionic 3+Angular 5.0.3设置HttpHeader传JWT令牌遇跨域错误求助

看起来你遇到的是典型的CORS跨域权限问题——当你在请求中添加了自定义的Authorization头时，浏览器会先发送一个OPTIONS预请求，询问后端是否允许这个请求头。如果后端返回的Access-Control-Allow-Headers列表里没有包含Authorization，浏览器就会拦截后续的实际请求，抛出你看到的错误。

你的前端代码本身没有问题，但需要在Node.js后端配置CORS，明确允许Authorization头。下面分两种常见情况给出解决方案：

1. 使用cors中间件（推荐） #

如果你的后端用Express框架，最简便的方式是使用官方的cors包来配置：

首先确保已经安装了cors：

npm install cors --save

然后在你的Express入口文件（比如app.js或server.js）中添加以下配置：

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

// 配置CORS，允许指定来源和Authorization头
app.use(cors({
  origin: 'http://localhost:8100', // 替换成你的Ionic前端运行地址
  allowedHeaders: ['Content-Type', 'Authorization'], // 明确包含Authorization
  credentials: true // 如果你的请求需要携带Cookie，开启这个；否则可以忽略
}));

// 处理所有OPTIONS请求（有些场景下需要单独配置）
app.options('*', cors({
  origin: 'http://localhost:8100',
  allowedHeaders: ['Content-Type', 'Authorization']
}));

// 后续的路由和业务逻辑
app.get('/getUser', (req, res) => {
  // 你的认证和返回用户信息的逻辑
});

2. 手动设置CORS响应头 #

如果不想使用第三方中间件，可以手动在中间件中设置响应头：

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

app.use((req, res, next) => {
  // 允许前端来源，生产环境建议指定具体域名，不要用*
  res.header('Access-Control-Allow-Origin', 'http://localhost:8100');
  // 允许的HTTP方法
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  // 关键：允许Authorization头
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  
  // 处理OPTIONS预请求，直接返回200状态码
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  
  next();
});

// 你的路由
app.get('/getUser', (req, res) => {
  // 业务逻辑
});

额外提示：JWT头格式规范 #

另外，JWT令牌在Authorization头中的标准格式是Bearer <token>，所以建议你修改前端代码中的头设置：

let headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);

这样后端在解析令牌时也能符合通用规范，避免后续可能出现的解析问题。

重启后端服务后，再测试你的请求，应该就能正常通过认证了。

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