Enable CORS between Flex Plugins and Functions

(warning)

Runtime handler version requirement

This example uses headers and cookies, which are only accessible when your Function is running @twilio/runtime-handler version 1.2.0 or later. Consult the Runtime Handler guide to learn more about the latest version and how to update.

A common use case is to call Functions from a Flex Plugin to retrieve external data such as statistics. Sometimes, this results in Cross-Origin Resource Sharing (CORS) restrictions in production environments due to the different hostnames between the Flex Plugin and the Function being called.

Fortunately, CORS errors, in this context or other situations, can be addressed by leveraging the response headers of the Function to allow any Origin, as shown in the following example code.

Create and host a Function

Before you run any of the examples on this page, create a Function and paste the example code into it. You can create a Function in the Twilio Console or by using the Serverless Toolkit.

ConsoleServerless Toolkit

If you prefer a UI-driven approach, complete these steps in the Twilio Console:

Log in to the Twilio Console and navigate to Develop > Functions & Assets. If you're using the legacy Console, open the Functions tab.
Functions are contained within Services. Click Create Service to create a new Service.
Click Add + and select Add Function from the dropdown.
The Console creates a new protected Function that you can rename. The filename becomes the URL path of the Function.
Copy one of the example code snippets from this page and paste the code into your newly created Function. You can switch examples by using the dropdown menu in the code rail.
Click Save.
Click Deploy All to build and deploy the Function. After deployment, you can access your Function at https://<service-name>-<random-characters>-<optional-domain-suffix>.twil.io/<function-path>
For example: test-function-3548.twil.io/hello-world.

You can now invoke your Function with HTTP requests, configure it as the webhook for a Twilio phone number, call it from a Twilio Studio Run Function Widget, and more.

Enable CORS

Allow for a client-side Flex Plugin to communicate with a Function on a different host

1exports.handler = (context, event, callback) => {
2  // Access the NodeJS SDK by calling context.getTwilioClient()
3  const client = context.getTwilioClient();
4
5  // Create a custom Twilio Response
6  const response = new Twilio.Response();
7  // Set the CORS headers to allow Flex to make an error-free HTTP request
8  // to this Function
9  response.appendHeader('Access-Control-Allow-Origin', '*');
10  response.appendHeader('Access-Control-Allow-Methods', 'OPTIONS, POST, GET');
11  response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');
12
13  // Use the NodeJS SDK to make an API call and gather
14  // statistics for the Flex Plugin.
15  // Note that the workspace SID is passed from the event parameter
16  // of the incoming request.
17  client.taskrouter.v1
18    .workspaces(event.WorkspaceSid)
19    .workers()
20    .cumulativeStatistics()
21    .fetch()
22    .then((data) => {
23      response.appendHeader('Content-Type', 'application/json');
24      response.setBody(data);
25      // Return a success response using the callback function
26      return callback(null, response);
27    })
28    .catch((err) => {
29      response.appendHeader('Content-Type', 'plain/text');
30      response.setBody(err.message);
31      response.setStatusCode(500);
32      // If there's an error, send an error response.
33      // Keep using the response object for CORS purposes.
34      return callback(null, response);
35    });
36};

If you want to learn more about Flex Plugins that would be invoking a Function in this way, check out this tutorial on calling a Function from a Flex Plugin.

Enable CORS between Flex Plugins and Functions

Runtime handler version requirement

Create and host a Function

Run your Function in local development

Deploy your Function

Enable CORS