Skip to contentSkip to navigationSkip to topbar
Twilio Docs
Rate this page:
On this page

Enable CORS between Flex Plugins and Functions

(warning)

Warning

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(link takes you to an external page)) 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

create-and-host-a-function page anchor

In order to run any of the following examples, you will first need to create a Function into which you can paste the example code. You can create a Function using the Twilio Console or the Serverless Toolkit as explained below:

ConsoleServerless Toolkit

If you prefer a UI-driven approach, creating and deploying a Function can be done entirely using the Twilio Console and the following steps:

  1. Log in to the Twilio Console and navigate to the Functions tab(link takes you to an external page) . If you need an account, you can sign up for a free Twilio account here(link takes you to an external page) !
  2. Functions are contained within Services . Create a Service by clicking the Create Service(link takes you to an external page) button and providing a name such as test-function .
  3. Once you've been redirected to the new Service, click the Add + button and select Add Function from the dropdown.
  4. This will create a new Protected Function for you with the option to rename it. The name of the file will be path it is accessed from.
  5. Copy any one of the example code snippets from this page that you want to experiment with, and paste the code into your newly created Function. You can quickly switch examples by using the dropdown menu of the code rail.
  6. Click Save to save your Function's contents.
  7. Click Deploy All to build and deploy the Function. After a short delay, your Function will be accessible from: https://<service-name>-<random-characters>-<optional-domain-suffix>.twil.io/<function-path>
    For example: test-function-3548.twil.io/hello-world .

Your Function is now ready to be invoked by HTTP requests, set as the webhook of a Twilio phone number, invoked by a Twilio Studio Run Function Widget, and more!

Enable CORS

enable-cors page anchor

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


_36
exports.handler = (context, event, callback) => {
_36
// Access the NodeJS Helper Library by calling context.getTwilioClient()
_36
const client = context.getTwilioClient();
_36
_36
// Create a custom Twilio Response
_36
const response = new Twilio.Response();
_36
// Set the CORS headers to allow Flex to make an error-free HTTP request
_36
// to this Function
_36
response.appendHeader('Access-Control-Allow-Origin', '*');
_36
response.appendHeader('Access-Control-Allow-Methods', 'OPTIONS, POST, GET');
_36
response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');
_36
_36
// Use the NodeJS Helper Library to make an API call and gather
_36
// statistics for the Flex Plugin.
_36
// Note that the workspace SID is passed from the event parameter
_36
// of the incoming request.
_36
client.taskrouter.v1
_36
.workspaces(event.WorkspaceSid)
_36
.workers()
_36
.cumulativeStatistics()
_36
.fetch()
_36
.then((data) => {
_36
response.appendHeader('Content-Type', 'application/json');
_36
response.setBody(data);
_36
// Return a success response using the callback function
_36
return callback(null, response);
_36
})
_36
.catch((err) => {
_36
response.appendHeader('Content-Type', 'plain/text');
_36
response.setBody(err.message);
_36
response.setStatusCode(500);
_36
// If there's an error, send an error response.
_36
// Keep using the response object for CORS purposes.
_36
return callback(null, response);
_36
});
_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.

Rate this page: