How to Send HTTP OPTIONS Requests in Axios

This article explains how to explicitly send HTTP OPTIONS requests using the Axios library in JavaScript and Node.js. An OPTIONS request is commonly used in Cross-Origin Resource Sharing (CORS) to verify server permissions, permitted HTTP methods, and allowed headers before dispatching an actual request. You will learn the syntax for sending manual preflight checks with Axios and how to inspect the response headers returned by the target server.

Using axios.options()

Axios provides a dedicated shortcut method, axios.options(), to dispatch an HTTP OPTIONS request. It accepts the target URL as the first argument and an optional configuration object as the second.

import axios from 'axios';

async function checkPermissions(url) {
  try {
    const response = await axios.options(url);
    console.log('Status Code:', response.status);
    console.log('Allowed Methods:', response.headers['allow']);
    console.log('CORS Allowed Methods:', response.headers['access-control-allow-methods']);
    console.log('CORS Allowed Headers:', response.headers['access-control-allow-headers']);
  } catch (error) {
    console.error('Error during OPTIONS request:', error.message);
  }
}

checkPermissions('https://api.example.com/data');

Using the Generic axios() Configuration

You can also send an OPTIONS request using the generic Axios request configuration object. This approach is helpful when building dynamic requests or when passing custom headers.

import axios from 'axios';

async function sendPreflightCheck() {
  try {
    const response = await axios({
      method: 'options',
      url: 'https://api.example.com/data',
      headers: {
        'Origin': 'https://myapp.com',
        'Access-Control-Request-Method': 'POST',
        'Access-Control-Request-Headers': 'Content-Type, Authorization'
      }
    });

    console.log('Preflight Response Headers:', response.headers);
  } catch (error) {
    if (error.response) {
      console.error('Preflight rejected with status:', error.response.status);
    } else {
      console.error('Network or configuration error:', error.message);
    }
  }
}

sendPreflightCheck();

Key Response Headers to Inspect

When inspecting the response of an OPTIONS request, evaluate the following headers to determine server capabilities:

• Allow: Lists the standard HTTP methods supported by the target resource (e.g., GET, POST, OPTIONS).
• Access-Control-Allow-Methods: Specifies which HTTP methods are permitted during cross-origin requests.
• Access-Control-Allow-Headers: Indicates which HTTP headers can be included in the actual request.
• Access-Control-Allow-Origin: Specifies which origins are authorized to access the resource.
• Access-Control-Max-Age: Indicates the duration in seconds that the preflight results can be cached by the client.

Handling Responses

Successful OPTIONS responses typically return an HTTP status code of 200 OK or 204 No Content. If the server rejects the preflight request (for instance, due to an unapproved origin), it may return a 403 Forbidden or 405 Method Not Allowed status code, which will be caught in the catch block of your Axios call.