Angular 5中Authorization请求头失效：Ionic 3调用JWT API报405错误

这种情况我之前踩过好几次坑，大概率是浏览器的CORS预检请求（OPTIONS）没被后端正确处理导致的——毕竟Postman和浏览器控制台直接发送GET请求时，不会触发预检步骤，而Ionic/Angular的Http模块在发送带自定义头（比如Authorization）的跨域请求时，浏览器会自动先发一个OPTIONS请求，用来确认服务器是否允许这个请求。如果后端没配置支持OPTIONS方法，就会返回405错误。

下面是一步步的排查和解决思路：

1. 先确认是不是预检请求的锅 #

打开浏览器开发者工具的「Network」面板，重新触发请求，看是不是先出现了一个OPTIONS方法的请求，并且它的返回状态是405。如果是的话，问题就锁定在后端的CORS配置上了。

2. 后端配置支持OPTIONS请求 #

需要在你的API服务器上添加CORS相关的响应头，允许OPTIONS方法和自定义请求头：

• 允许跨域来源：Access-Control-Allow-Origin: 你的应用域名（开发环境可以临时用*，生产环境建议指定具体域名）
• 允许的HTTP方法：Access-Control-Allow-Methods: GET, POST, OPTIONS
• 允许的请求头：Access-Control-Allow-Headers: Authorization, Content-Type
• 可选：缓存预检结果（减少重复请求）：Access-Control-Max-Age: 86400

不同后端语言的配置方式不同，比如Node.js/Express可以用cors中间件，Java Spring可以配置CorsFilter，根据你的后端技术栈调整就行。

3. 检查前端请求代码的细节 #

虽然你说用了正确的GET方法，但还是可以再确认几点：

• 确保没有在HTTP拦截器里意外修改了请求方法。比如有些拦截器可能会误把GET改成POST，或者添加了多余的配置。
• 检查Authorization头的格式：JWT通常要求是Bearer <token>格式，你写的token是不是少了Bearer 前缀？比如应该是：

  headers.set('Authorization', 'Bearer ' + yourActualToken)
  

  （如果Postman里没加前缀也能正常请求，这条可以忽略，但还是建议按标准格式来）
• 确认你的请求代码没有拼写错误，比如Angular HttpClient的GET请求示例：

  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  // ...
  
  const headers = new HttpHeaders().set('Authorization', 'Bearer your-token');
  this.http.get('https://your-api-url/endpoint', { headers })
    .subscribe(response => {
      // 处理响应
    }, error => {
      console.error(error);
    });
  

4. 开发环境配置Ionic代理 #

如果是本地开发时调用远程API，可以通过Ionic的代理配置绕过浏览器的CORS限制：
在项目根目录的ionic.config.json里添加代理规则：

{
  "name": "YourIonicApp",
  "type": "angular",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "https://your-api-server-domain"
    }
  ]
}

然后请求时用/api/your-endpoint代替完整URL，比如：

this.http.get('/api/your-endpoint', { headers })

这样Ionic会在开发时帮你代理请求，避免触发浏览器的CORS预检。

按照上面的步骤排查，应该能解决这个405的问题。

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