If you're running a web app that relies on an API, chances are you're unknowingly wasting money on CORS preflight requests. These seemingly harmless requests can add up quickly, especially if you're using services like AWS API Gateway that charge per request. The good news? You can significantly reduce these costs and improve performance with a few strategic changes. Let’s dive into how you can tackle this issue.

What Are CORS Preflight Requests?

Cross-Origin Resource Sharing (CORS) is a mechanism that allows web apps to securely make requests to servers hosted on a different origin (domain, protocol, or port). Whenever a browser makes a cross-origin request, it may first send a preflight request. This request asks the server for permission to proceed with the actual request, ensuring that the server supports the intended method and headers.

While preflight requests are essential for security, they come with a cost:

• API Gateway Charges: You pay for both the preflight and the main request.
• Increased Latency: Preflight requests introduce an additional roundtrip, making your app feel slower.

The Cost of Subdomains

Here’s a surprising detail: even if your API is hosted on a subdomain (e.g., api.example.com), the browser considers requests from your main domain (example.com) as cross-origin.

This means that your users’ browsers will trigger preflight requests for every interaction with your API. Over time, this can result in significant extra costs and latency.

The Solution: Same-Origin API Hosting

To eliminate unnecessary preflight requests, host your API under the same domain as your web app. For example:

• Instead of api.example.com, use example.com/api.

By doing so, the browser no longer sees requests as cross-origin, and preflight requests are avoided entirely.

Why does this matter?

• You’ll reduce your API Gateway charges, as each interaction only involves a single request.
• Your app will feel faster to users because the additional preflight roundtrip is eliminated.

Why Subdomains Are Still Popular

Subdomains aren’t inherently bad and are often used for good reasons:

• Organization: Subdomains help structure multiple APIs (e.g., api.example.com, auth.example.com).
• Team Autonomy: Different teams can manage their own APIs independently.
• Environment Separation: Subdomains are commonly used for staging or development environments.

However, for personal projects, side hustles, or small businesses where budgets are tight, these benefits may not outweigh the extra costs.

What If Same-Origin Isn’t an Option?

If consolidating your API under the same domain isn’t feasible, you can still minimize costs by leveraging CloudFront or similar Content Delivery Networks (CDNs).

Using CloudFront to Cache Preflight Requests

CloudFront can cache preflight requests at edge locations, reducing the number of requests that reach your API Gateway. Here’s how it works:

1. Set Up CORS Headers: Ensure your API includes the appropriate CORS headers in responses.
2. Cache Options Requests: Configure CloudFront to cache responses to OPTIONS requests, which are typically used for preflights.
3. Reduce Gateway Calls: CloudFront will handle preflight requests at a much lower cost than API Gateway.

While this doesn’t eliminate preflight requests entirely, it significantly reduces their financial and performance impact.

The Latency Impact of Preflight Requests

Beyond cost, preflight requests add latency. Each preflight introduces an additional roundtrip between the browser and your server. This can be particularly noticeable for users far from your API’s hosting region.

A Real-World Example

Imagine a user in Japan accessing an API hosted in the U.S.:

• The preflight request makes a roundtrip to the U.S.
• The actual request then makes another roundtrip.

This extra latency can create a sense of slowness, impacting user experience. By eliminating preflights, you’re not just saving money but also making your app feel faster and more responsive.

Step-by-Step Summary

Here’s how you can optimize your API setup to reduce costs and latency:

1. Host APIs Under the Same Domain
2. Move your API from api.example.com to example.com/api to avoid cross-origin requests.
3. Leverage CloudFront for Caching
4. If same-origin hosting isn’t possible, use CloudFront to cache preflight requests and reduce API Gateway charges.
5. Optimize CORS Configuration
6. Ensure your API’s CORS headers are correctly set to minimize unnecessary preflights.
7. Monitor Latency
8. Be mindful of your users’ geographic locations and aim to minimize roundtrip delays.

Why It Matters

For small projects or businesses, optimizing API costs and performance can make a significant difference. Eliminating unnecessary preflight requests helps:

• Save Money: Reduce API Gateway charges.
• Enhance Performance: Lower latency and improve user experience.
• Simplify Development: Avoid complex workarounds for handling CORS issues.

Wrapping Up

Small optimizations can have a big impact, especially when it comes to managing costs for APIs. By hosting your API under the same domain or leveraging caching solutions like CloudFront, you can save money and deliver a better experience for your users.

If you found this guide helpful, check out my weekly posts for more tips and tutorials on AWS, serverless development, and API optimization. Let’s build smarter and save together!