AWS Elastic Beanstalk多Docker容器部署后前端调用API报错如何解决

• 核心错误：Angular前端的API地址配置为localhost:9901。Angular代码运行在访问用户的本地浏览器中，此处的localhost指向用户自己的设备，而非部署服务的EC2实例，因此用户本地没有运行9901端口的API服务，直接触发连接拒绝报错。你在EC2实例上curl能正常访问，是因为EC2本地确实暴露了9901端口，二者的localhost指向完全不同。
• 潜在问题1：Elastic Beanstalk关联的EC2安全组未开放9901端口的公网入站规则，即使修改API地址后也可能无法正常访问。
• 潜在问题2：CORS配置冲突，ASP.NET Core中不允许同时启用AllowAnyOrigin()和AllowCredentials()，二者规则互斥会导致CORS规则失效。

1. 修改Angular的API调用地址
   将appconfig.json中的remoteServiceBaseUrl修改为你的Elastic Beanstalk环境域名加端口：

"remoteServiceBaseUrl": "http://myappqa-env.eba-xasnmn7n.sa-east-1.elasticbeanstalk.com:9901"

更优方案：在前端Nginx配置中添加反向代理规则，将/api前缀的请求转发到my_api:80容器，这样API地址可以直接写/api，无需开放额外公网端口，也能彻底避免跨域问题。

2. 调整EC2安全组规则
   进入AWS控制台的EC2安全组页面，找到你的Elastic Beanstalk环境关联的安全组，添加入站规则：允许TCP 9901端口的来源为0.0.0.0/0（如果需要限制访问范围可以调整为指定IP段）。

3. 修复CORS配置
   二选一调整即可：

• 方案A（需要传递Cookie等凭据）：注释掉AllowAnyOrigin()，恢复原来的WithOrigins()配置，明确指定允许的前端域名。
• 方案B（不需要传递凭据）：删除AllowCredentials()配置行，保留AllowAnyOrigin()即可。

4. 重新构建前后端镜像，推送到ECR后重新部署Elastic Beanstalk环境即可验证。

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