Tag: HTTP Headers

Fixing MIME Type Errors Azure Front Door to AWS S3 CloudFront

Posted on by

When integrating Azure Front Door with an AWS-hosted Single Page Application (SPA) on S3 + CloudFront, developers often encounter MIME type errors. A common issue is that scripts and stylesheets fail to load due to incorrect MIME types, leading to errors such as:

“Expected a JavaScript module script but the server responded with a MIME type of ‘text/html’.”

This typically happens due to misconfigurations in CloudFront, S3 bucket settings, or response headers. In this post, we’ll explore the root cause of these errors and how to properly configure your setup to ensure smooth redirection and loading of static assets.

fixing mime type errors when redirecting from azure front door to aws s3 cloudfront
fixing mime type errors when redirecting from azure front door to aws s3 cloudfront

The error is occuring 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
    sh
    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):
    json
    [
    {
    "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

Resolving MIME type errors when redirecting from Azure Front Door to an AWS-hosted SPA requires proper content-type handling, CloudFront behavior configurations, and ensuring correct headers are served from S3. By implementing the solutions outlined in this guide, you can avoid these errors and ensure your frontend application loads seamlessly.

If you’ve faced similar challenges or have additional insights, feel free to share your thoughts in the comments! 🚀

Scroll to Top