Skip to main content
Solved

How to invoke external REST API from inside LucidChart extension plugin

  • 10 July 2024
  • 3 replies
  • 58 views

I am trying to call an external REST API the way shown below, the script runs well through debug-server, but it fails with error when it is packaged and uploaded to run normally. 

import {EditorClient, Menu, MenuType, Viewport} from 'lucid-extension-sdk';
import {prepareData} from './preparedata';
import axios from 'axios';

const client = new EditorClient();
const menu = new Menu(client);
const viewport = new Viewport(client);

client.registerAction('testAction', () => {
const data = new prepareData(client,viewport);
data.analyzeData();

const response = axios.get('https://google.com')
console.log(response)
});

menu.addMenuItem({
label: 'test label',
action: 'testAction',
menuType: MenuType.Main,
});

Also the code below was tried out with 

 

import {EditorClient, Menu, MenuType, Viewport,XHRRequest} from 'lucid-extension-sdk';
import {prepareData} from './preparedata';
import axios from 'axios';

const client = new EditorClient();
const menu = new Menu(client);
const viewport = new Viewport(client);

client.registerAction('testAction', () => {
const data = new prepareData(client,viewport);
data.analyzeData();

var request : XHRRequest = {url:'https://google.com',method:'GET',headers:{'Content-Type':'application/json'},data:"Hi"}
const response = client.xhr(request)
console.log(response)
});

menu.addMenuItem({
label: 'test label',
action: 'testAction',
menuType: MenuType.Main,
});

With the XHRRequest I get the following error message

 

Could you explain how to do it the right/intended way?

Hi KGV!

This is a fairly technical question that we will want one of our developers to look at. However, for the rest of this week our developers are involved in an internal hackathon, so we unfortunately may not be able to answer until next week. I’ll let the devs know, but a response may take us a few days.

Thanks for building on our platform!


@Richard U any insight?


HI KGV, 

Making calls with axios will not work in a published editor extension. With the `Debug Local Extension` option toggled on, the guardrails are lowered on the sandbox a little, which is probably why you are able to use axios successfully.

Instead, you are correct to use `client.xhr()` for simple requests, or `client.oauthXhr()` if you need to make OAuth 2.0 requests.

It looks like you are running into a CORS error which means that `google.com` will not return responses to the extension's origin for security reasons. If we consider this, it makes sense because `google.com` is a public facing website meant to be accessed by browsers where the requesting host and requested host will be the same. In our case, we are trying to make requests from `lucidextensions.app`, not `google.com`, and are getting blocked.

If you try another API that is configured to send cross origin responses, a response should come back. 

For example:

GET: https://dummy.restapiexample.com/api/v1/employees

Hope this helps!


Reply