Angular 6应用部署AWS S3遇图片及API代理403问题求助

算力阿峰

2026-5-14

解决S3部署的403问题与API代理方案

一、修复S3图片403 Forbidden问题

你的桶策略看起来是正确的，但403通常还有其他隐藏原因，按以下步骤逐一排查：

检查对象ACL权限：
即使桶策略允许公共读取，单个图片对象的ACL可能还是默认的私有状态。进入S3控制台，找到对应的图片对象，右键选择「修改权限」，确保勾选了「公共读取」（也可以在上传文件时直接设置ACL为公共读）。
关闭S3的公共访问阻止：
进入桶的「权限」标签页，找到「阻止公共访问（桶设置）」，确保没有勾选「阻止所有公共访问」——这个选项会直接覆盖你的桶策略，导致公共读取规则失效。
验证静态网站托管配置：
确认你已经正确开启S3静态网站托管：
1. 进入桶的「属性」标签页，找到「静态网站托管」，选择「启用」。
2. 设置「索引文档」为index.html，错误文档可选error.html。
3. 访问时必须使用S3提供的静态网站域名（比如http://your-bucket.s3-website-us-east-1.amazonaws.com），而不是桶的REST API域名（https://your-bucket.s3.amazonaws.com），后者会触发额外的权限验证。
检查路径大小写：
S3的对象键是严格区分大小写的！如果你的代码里写的是/assets/Logo.png，但S3里实际存储的是/assets/logo.png，就会返回403。统一代码和S3存储的路径大小写即可解决。

二、解决API代理的403问题（S3无法处理本地代理）

你本地用的ng serve --proxy-config是Angular CLI提供的开发环境专属代理，但S3只是静态存储服务，没有反向代理的能力——部署到S3后，proxy.conf.json完全不起作用，前端会直接向API服务器发起跨域请求，被对方的CORS策略拒绝，导致403。

这里提供几种可行的生产环境代理方案：

方案1：CloudFront + Lambda@Edge（推荐，无服务器架构）

这是AWS生态下最适配静态网站的代理方案：

创建CloudFront分发：
- 源域名选择你的S3静态网站托管域名（不是S3桶的REST域名）。
- 配置基础行为规则，确保静态资源能正常访问。

编写Lambda@Edge函数：
创建一个Node.js Lambda函数（需放在us-east-1区域），核心逻辑如下：

exports.handler = async (event) => {
  const request = event.Records[0].cf.request;
  const uri = request.uri;

  // 匹配/api开头的请求，转发到API服务器
  if (uri.startsWith('/api/')) {
    request.origin = {
      custom: {
        domainName: 'url_to_my_api_server', // 替换为你的API域名
        port: 80,
        protocol: 'http',
        sslProtocols: ['TLSv1', 'TLSv1.1'],
      }
    };
    request.headers['host'] = [{ key: 'Host', value: 'url_to_my_api_server' }];
    request.uri = uri.replace('/api', ''); // 若API服务器不需要/api前缀，可调整此规则
  }
  return request;
};

绑定Lambda到CloudFront行为：
在CloudFront分发的「行为」中，添加路径为/api/*的行为，触发类型选择「源请求」，关联刚才创建的Lambda@Edge函数。
前端无需修改：
前端代码中API请求的baseURL保持为/api即可，CloudFront会自动转发请求到API服务器，且不会暴露真实的API地址。

方案2：API Gateway作为代理

创建API Gateway：
- 新建REST API，添加/api资源并开启「代理资源」（即/api/{proxy+}）。
- 配置集成请求为HTTP代理，目标端点设为你的API服务器地址（比如http://url_to_my_api_server/{proxy}）。
- 开启CORS：在/api资源上启用CORS，允许你的CloudFront/S3域名访问。
部署API：
把API部署到一个阶段（比如prod），得到API的访问地址（比如https://xxxx.execute-api.us-east-1.amazonaws.com/prod/api）。
修改前端配置：
把前端的API baseURL改成API Gateway的地址，前端请求会先到API Gateway，再转发到你的API服务器，彻底避免跨域问题。

方案3：EC2 + Nginx反向代理

如果你已经有EC2实例，可以用Nginx实现和本地开发一致的代理效果：

构建Angular项目：
本地执行ng build --prod，得到dist目录下的静态文件。
部署到EC2：
把dist目录的文件上传到EC2的Nginx根目录（比如/var/www/html）。

配置Nginx反向代理：
修改Nginx配置文件（比如/etc/nginx/sites-available/default），添加以下规则：

server {
  listen 80;
  server_name your-ec2-domain;

  root /var/www/html;
  index index.html;

  # 处理Angular单页应用路由
  location / {
    try_files $uri $uri/ /index.html;
  }

  # API代理规则
  location /api/ {
    proxy_pass http://url_to_my_api_server/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

重启Nginx：
执行sudo systemctl restart nginx，访问EC2地址时，/api请求会自动转发到你的API服务器，和本地开发环境完全一致。

三、其他可选部署方式

除了S3，还有几种适合Angular应用的部署方案：

Firebase Hosting：支持静态网站托管，可通过firebase.json配置rewrite规则实现代理，配置简单，适合小型项目。
Elastic Beanstalk：把Angular项目打包后部署到Node.js环境，或配置Nginx反向代理，适合需要灵活服务器配置的场景。
Docker + ECS/EKS：把Angular应用和Nginx打包成Docker镜像，部署到AWS容器服务，适合微服务架构的项目。

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

Angular 6应用部署AWS S3遇图片及API代理403问题求助

一、修复S3图片403 Forbidden问题 #

二、解决API代理的403问题（S3无法处理本地代理） #

方案1：CloudFront + Lambda@Edge（推荐，无服务器架构） #

方案2：API Gateway作为代理 #

方案3：EC2 + Nginx反向代理 #