Chrome拒绝设置不安全Host头：Angular4用AWS Sig4签名API Gateway遇阻

我之前也碰到过类似的坑，浏览器的安全限制确实会给SigV4签名带来小麻烦，咱们一步步来解决：

为什么会出现这个错误？ #

Chrome等现代浏览器出于安全考虑，不允许前端JS代码手动设置或修改Host头——这个头是浏览器自动根据请求URL生成并发送的，目的是防止恶意请求伪造主机信息。所以当你按照AWS文档的要求尝试往请求里加Host头时，浏览器直接就拦截了。

正确的解决姿势 #

不需要强行去设置Host头，而是换个思路：在生成SigV4签名的时候，用浏览器会自动发送的Host值来构建规范请求，实际请求中不用手动加这个头。具体操作如下：

1. 从请求URL中提取Host值 #

在Angular里，你可以通过URL对象解析目标API的地址，直接拿到Host：

const apiUrl = new URL('https://your-api-gateway-endpoint.execute-api.region.amazonaws.com/your-stage/resource');
const host = apiUrl.host; // 比如：your-api-gateway-endpoint.execute-api.region.amazonaws.com

2. 用提取的Host构建规范请求 #

生成SigV4的规范请求时，把这个host值加入到规范头列表中，但不要在实际的HTTP请求里添加Host头：

// 无负载请求（GET/DELETE）的规范头
const canonicalHeaders = `host:${host}\nx-amz-date:${yourAmzDate}\n`;

// 带负载请求（POST/PUT）的规范头，还要加上content-type
const canonicalHeaders = `content-type:application/json\nhost:${host}\nx-amz-date:${yourAmzDate}\n`;

3. 调整Angular的请求拦截器（如果用了的话） #

如果是用HTTP拦截器统一处理签名，确保克隆请求时只添加签名相关的头（比如x-amz-date、Authorization），绝对不要加Host：

@Injectable()
export class SigV4Interceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const urlObj = new URL(request.url);
    const host = urlObj.host;

    // 计算SigV4签名，这里要用到上面的host值
    const { amzDate, authorization } = this.generateSigV4Signature(request, host);

    // 克隆请求，只添加必要的签名头
    const signedRequest = request.clone({
      setHeaders: {
        'x-amz-date': amzDate,
        'Authorization': authorization,
        // POST请求如果没设置Content-Type，手动加上
        ...(request.method === 'POST' && !request.headers.has('Content-Type') 
          ? { 'Content-Type': 'application/json' } 
          : {})
      }
    });

    return next.handle(signedRequest);
  }

  private generateSigV4Signature(request: HttpRequest<any>, host: string): { amzDate: string, authorization: string } {
    // 这里写你的SigV4签名逻辑，用host构建规范请求即可
    // ...
  }
}

4. 验证签名匹配 #

一定要确保你签名时用的Host值和浏览器实际发送的完全一致，包括端口（如果API用了非标准端口的话）。比如API Gateway的端点一般没有端口，直接用xxx.execute-api.us-east-1.amazonaws.com就可以。

最后再强调一遍 #

浏览器会自动帮你处理Host头的发送，你只需要在签名计算阶段用对这个值就行，完全不需要手动在请求里设置它——这样既符合AWS的签名要求，又避开了浏览器的安全限制。

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