要解决"Angular路由在Cloudfront和S3上无法工作"的问题,可以按照以下步骤进行:
确保你的Angular应用已经正确部署到S3桶中,并且可以通过S3桶的URL访问到应用。
在S3桶的属性中,找到并打开"静态网站托管"选项。确保你已经将"索引文档"设置为index.html
,并且将"错误文档"保持为空。
在CloudFront中,找到并打开对应的分发。
在分发的属性中,找到并打开"错误页面"选项。确保你已经将"默认错误响应"设置为Customize
。
在"默认错误响应"中,找到并打开"HTTP响应代码"选项。将"400 Bad Request"和"403 Forbidden"的响应代码添加到列表中。
返回到分发的属性中,在"行为"选项卡下,找到并打开"默认缓存行为"。
在"默认缓存行为"中,确保你已经启用了"对象级别的缓存"。
确保你已经将"缓存策略"设置为Use legacy cache settings
。
确保你已经将"缓存行为"设置为Cache Based on Selected Request Headers
。
在"缓存行为"中,找到并打开"增加头信息"选项。添加一个名为Origin
的头信息,并将其值设置为你的S3桶的URL,例如http://your-s3-bucket-url.s3-website-us-east-1.amazonaws.com
。
保存并等待CloudFront分发的更改生效。
通过以上步骤,你的Angular路由应该能够在CloudFront和S3上正常工作了。记得在部署Angular应用时,使用ng build --prod
命令来生成优化后的静态文件,并将这些文件上传到S3桶中。