Boost Your Web App's Performance: Best Practices for Eliminating Unnecessary Options Calls

Avoid Options Call To Improve The Performance Of Your Web Apps 1

When a cross origin request is initiated by a client app, browsers make a preflight request before executing an actual request.

A preflight request, is a mechanism in CORS by the browser to check if the resource destination is willing to accept the real request or not. This mechanism works by sending an OPTIONS HTTP method with Access-Control-Request-Method and Access-Control-Request-Headers in the header to notify the server about the type of request it wants to send. The response it retrieves determine if the actual request is allowed to be sent or not.
Option calls are additional calls and will contribute to the time taken for a response. One option call before every POST request can start contributing significantly to the latency of the application.

Example: Assume that example.com makes an authenticated POST request to a server api.service.com. The browser makes an additional OPTIONS request to api.service.com before making the actual request.

The POST request will be processed only if the response to the OPTIONS call has the headers
access-control-allow-methods:POST
access-control-allow-origin:example.com
If these headers are not present, the POST call is aborted.

Preflight requests make CORS (Cross Origin Resource Sharing) secure, but at the same time they introduce noticeable latency to every rest API call.

This article explains how to avoid OPTIONS calls when you are using AWS CloudFront as CDN and AWS API Gateway to manage your APIs.

Prerequisites

  • AWS account.
  • Web Application hosted in AWS Cloudfront.
  • APIs managed by AWS API Gateway.

Steps

Create/Add an Origin in your cloudfront distribution.

  • Navigate to AWS API Gateway, select your API and click on ‘Stages’ from side menu, select any stage and copy invoke url excluding stage name

  • Navigate to AWS Cloudfront, select your distribution and click on tab ‘Origins and Origin Groups’ then ‘Create Origin’
  • Paste invoke url copied from API Gateway in ‘Origin Domain Name’
  • Leave ‘Origin Path’ empty
  • Change ‘Origin Protocol Policy’ to
  • HTTPS Only.
  • Leave the rest of the fields untouched to their default values and click on ‘Create’.

Create origin

create origin

Create/Add a new Behaviour in your CloudFront distribution.

  • Select your CloudFront distribution and click on “Behaviours” tab and select ‘Create Behaviour’.
  • Fill ‘Path Pattern’ with stage name part of your API Gateway invoke url like below
    /stageName/*
  • For ‘Origin or Origin Group’ choose Origin which you have created in Step 1.
  • Change ‘Viewer Protocol Policy’ to Redirect HTTP to HTTPS.
  • Change Allowed HTTP Methods to GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
  • In ‘Cached HTTP Methods’ select  OPTIONS
  • In ‘Cache Based on Selected Request Headers’ select ‘Whitelist’
    Whitelist all the headers which you are referring in your api business logic
  • In ‘Object Caching’ select Customize
    • Enter 0 for Minimum TTL
    • Enter 0 for Maximum TTL
    • Enter 0 for Default TTL
  • Select ‘All’ for Forward Cookies
  • Select ‘Forward all, cache based on all’ for ‘Query String Forwarding and   Caching’
  • Select ‘No’ for ‘Smooth Streaming’
  • Select ‘No’ for ‘Restrict Viewer Access (Use Signed URLs or Signed Cookies)’
  • Select ‘Yes’ for Compress Objects Automatically
  • Click ‘Create Behaviour’
create behaviour

Test the Setup

  • Visit your web application using google chrome.
  • Open ‘Network’ tab in inspect mode.
  • Make an action which triggers rest api call and verify preflight (Options) requests are not made.

Click here to find out how Techpearl can build performant sites for you.

Companies will face many challenges during the product’s lifetime. A mature product manager will be able to handle the changes needed in the product, due to changing market trends and technologies and still be able to keep the product in track.

Read More Articles

 Contact Us Now

Talk to us to find out about our flexible engagement models.

Get In Touch With Us