OPTIONS & CORS

To enable Cross-Origin Resource Sharing (CORS) for Actions clients (including Blinks), all Action endpoints must handle HTTP OPTIONS requests with appropriate headers. This ensures clients can successfully pass CORS checks for all subsequent requests from the same origin domain. An Actions client may perform 'preflight' requests to the Action URL endpoint in the form of an OPTIONS HTTP method to check if the GET request will pass all CORS checks. The OPTIONS method should respond with all the required HTTP headers to allow clients, like Blinks, to properly make all the subsequent requests from the origin domain.

The minimum required HTTP headers are:

• Access-Control-Allow-Origin with a value of *

• Access-Control-Allow-Methods with a value of GET,POST,PUT,OPTIONS

• Access-Control-Allow-Headers with a minimum value of Content-Type, Authorization, Content-Encoding, Accept-Encoding

Here's an example of what this might look like in the Hono framework, taken from our Github examples:

const app = new OpenAPIHono();
app.use(
  cors({
    origin: '*',
    allowHeaders: ['Content-Type', 'Authorization', 'Accept-Encoding'],
    allowMethods: ['GET', 'POST', 'PUT', 'OPTIONS'],
  }),
);

Next.js also has a native function you can use to do this programmatically, taken from our Github examples:

// create the standard headers for this route (including CORS)
const headers = createActionHeaders();

To configure CORS for OPTIONS request, you can either set CORS headers in your Next.js configuration:

  headers: async () => {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Access-Control-Allow-Origin',
            value: '*',
          },
          {
            key: 'Access-Control-Allow-Methods',
            value: 'GET, POST, PUT, DELETE, OPTIONS',
          },
          {
            key: 'Access-Control-Allow-Headers',
            value:
              'Content-Type, Authorization, Accept-Encoding, Content-Encoding',
          },
        ],
      },
    ];
  },

or create a route handler for OPTIONS http method:

export const OPTIONS = async (req: Request) => {
  return new Response(null, { headers }); // CORS headers here
};

CORS Headers for Actions.json The actions.json file response must also return valid CORS headers for GET and OPTIONS requests as noted in the actions.json section of these docs

Follow this link for more on Next.js CORS configuration: https://nextjs.org/docs/app/api-reference/next-config-js/headers