Enable CORS between Flex Plugins and Functions
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) 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.
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:
If you prefer a UI-driven approach, creating and deploying a Function can be done entirely using the Twilio Console and the following steps:
- Log in to the Twilio Console and navigate to the Functions tab. If you need an account, you can sign up for a free Twilio account here!
- Functions are contained within Services. Create a Service by clicking the Create Service button and providing a name such as test-function.
- Once you've been redirected to the new Service, click the Add + button and select Add Function from the dropdown.
- 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.
- 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.
- Click Save to save your Function's contents.
- 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!
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 Helper Library by calling context.getTwilioClient()3const client = context.getTwilioClient();45// Create a custom Twilio Response6const response = new Twilio.Response();7// Set the CORS headers to allow Flex to make an error-free HTTP request8// to this Function9response.appendHeader('Access-Control-Allow-Origin', '*');10response.appendHeader('Access-Control-Allow-Methods', 'OPTIONS, POST, GET');11response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');1213// Use the NodeJS Helper Library to make an API call and gather14// statistics for the Flex Plugin.15// Note that the workspace SID is passed from the event parameter16// of the incoming request.17client.taskrouter.v118.workspaces(event.WorkspaceSid)19.workers()20.cumulativeStatistics()21.fetch()22.then((data) => {23response.appendHeader('Content-Type', 'application/json');24response.setBody(data);25// Return a success response using the callback function26return callback(null, response);27})28.catch((err) => {29response.appendHeader('Content-Type', 'plain/text');30response.setBody(err.message);31response.setStatusCode(500);32// If there's an error, send an error response.33// Keep using the response object for CORS purposes.34return 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.