Angular 4中AWS API Gateway的CORS问题（拦截器方案无效）

首先得敲黑板强调一个核心点：CORS是浏览器层面的安全限制，前端拦截器没法从根本上解决这个问题——真正的关键是在AWS API Gateway端配置正确的跨域响应头。你之前尝试用拦截器解决，大概率是方向偏了，先把服务端配置搞定，再回头梳理前端的问题。

第一步：AWS API Gateway端的CORS配置（最关键） #

很多人踩坑都是因为配置了CORS但没部署，或者配置项不对。按下面的步骤一步步来：

1. 登录AWS控制台，打开API Gateway服务，选中你的目标API
2. 在左侧导航栏找到Resources，选中你需要跨域的资源（比如根资源/，或者具体的接口路径）
3. 点击顶部的Actions按钮，选择Enable CORS
4. 在弹出的配置窗口里，填写以下关键项：
   • Allowed Origins：填你的前端域名（比如https://your-frontend-domain.com），开发环境可以暂时用*（生产环境不建议这么做）
   • Allowed Headers：要包含你前端请求中用到的所有自定义头，比如Authorization、Content-Type，不确定的话可以填*
   • Allowed Methods：勾选你需要允许的HTTP方法（GET、POST、PUT等，别忘了OPTIONS——浏览器会自动发预检请求）
5. 点击Enable CORS and replace existing CORS headers，然后一定要点击Deploy API，选择对应的部署阶段（比如prod、dev）——这一步绝对不能忘，不然配置根本不会生效！

第二步：修正你的Angular拦截器 #

看你贴的代码，拦截器好像没写完，而且可能存在两个问题：一是没必要注入HttpClient（拦截器只需要HttpHandler），二是可能错误处理了OPTIONS预检请求。

给你一个正确的token拦截器示例，它会跳过OPTIONS请求（因为预检请求不需要带token），同时给其他请求添加授权头：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
// 如果你有AuthService，就导入它，否则用localStorage或者其他方式获取token
// import { AuthService } from '../services/auth.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  // constructor(private authService: AuthService) {}
  constructor() {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 跳过OPTIONS预检请求，避免给它加token导致服务端报错
    if (request.method !== 'OPTIONS') {
      // 获取token，这里假设你存在localStorage里，或者从AuthService拿
      const token = localStorage.getItem('authToken');
      if (token) {
        // 克隆请求并添加Authorization头
        request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${token}`
          }
        });
      }
    }
    // 传递处理后的请求
    return next.handle(request);
  }
}

另外，别忘了在AppModule的providers里注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './path-to-your-interceptor';

@NgModule({
  // ...其他配置
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

常见排查点 #

如果还是不行，检查这几个地方：

• 确认API已经重新部署：在API Gateway的Stages里查看你的部署阶段，确保CORS配置已经同步过去
• 检查浏览器控制台的错误信息：如果是预检请求失败，看响应头里有没有Access-Control-Allow-Origin、Access-Control-Allow-Headers这些字段
• 清除浏览器缓存：有时候浏览器会缓存旧的OPTIONS响应，用隐私模式测试试试
• 确认前端请求的域名和AWS配置的Allowed Origins匹配：比如前端是http://localhost:4200，Allowed Origins就要填这个，不能只填localhost

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