Redirection from Azure front door to AWS SPA hosted on s3 with cloudfront

The error you're facing is due to Azure Front Door incorrectly serving your AWS S3/CloudFront-hosted Single Page Application (SPA). The MIME type mismatch suggests that the frontend resources (JS, CSS) are being served as text/html instead of their correct content types. This is often caused by misconfigurations in Azure Front Door, S3, or CloudFront.

✅ Solutions

1. Ensure Proper MIME Types in S3

Your AWS S3 bucket must serve files with the correct MIME types.

• Open AWS S3 Console → Select your Bucket → Properties → Scroll to "Static website hosting."
• Check the metadata of the files:
  • JavaScript files should have Content-Type: application/javascript
  • CSS files should have Content-Type: text/css
• If incorrect, update them:
  • Go to Objects → Select a file → Properties → Under "Metadata," add the correct Content-Type.

Command to Fix for All Files

If you want to correct MIME types for all files at once, run this command:

aws s3 cp s3://your-bucket-name s3://your-bucket-name --recursive --metadata-directive REPLACE --content-type "application/javascript"

(Modify for CSS, images, etc.)

---

2. Verify CloudFront Behavior

CloudFront should correctly forward content with the right Content-Type.

1. Open AWS CloudFront Console → Select your distribution.
2. Check the "Behaviors":
   • Compress Objects Automatically: Yes
   • Forward Headers: Whitelist "Origin" and "Content-Type"
   • Object Caching: Respect Headers
   • Query String Forwarding and Caching: Forward all, cache based on all
3. Purge Cache

   aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

   This clears any incorrect cached content.

---

3. Fix Azure Front Door Response Handling

Azure Front Door may be incorrectly handling responses from CloudFront.

1. Check Routing Rules:

   • Go to Azure Portal → Front Door → Routing Rules.
   • Ensure the Forwarding protocol is set to "Match incoming".
   • Caching must be disabled or set to "Use Origin Cache-Control."
   • Set Compression to gzip, br.

2. Enable Origin Custom Headers:

   • Add a custom header to force correct MIME types:

   Content-Type: application/javascript

3. Enable CORS Headers in S3 (if cross-origin issue arises):

   [
       {
           "AllowedHeaders": ["*"],
           "AllowedMethods": ["GET", "HEAD"],
           "AllowedOrigins": ["*"],
           "ExposeHeaders": []
       }
   ]

---

📌 Summary

Step	Fix
✅ S3	Ensure correct MIME types (application/javascript, text/css)
✅ CloudFront	Forward headers (Origin, Content-Type), Purge cache
✅ Azure Front Door	Set correct routing, disable incorrect caching
✅ CORS	Allow cross-origin requests if needed

📚 References

• AWS S3 MIME Type Fix
• CloudFront Cache Invalidation
• Azure Front Door Best Practices
• Fixing MIME Type Errors Azure Front Door to AWS S3 CloudFront