I'm developing a Figma plugin with Create Figma Plugin toolkit that uses LemonSqueezy for license management, but I'm encountering persistent CORS issues. Despite implementing various solutions, I keep receiving errors like:
Access to fetch at 'https://api.lemonsqueezy.com/v1/licenses/validate' from origin 'null' has been blocked by CORS policyProblem Context
- The main thread (main.ts) sends API requests to the UI thread (ui.tsx) via figma.ui.postMessage()
- The UI thread performs the fetch requests and returns results to the main thread
What I've Already Tried
- Using a CORS proxy: I've attempted to use api-cors-anywhere.lemonsqueezy.com instead of api.lemonsqueezy.com, but still receive CORS errors.
- Implementing a UI-Main communication system: I've created a system where:
- The main thread sets an isUiReadyForApi flag when the UI is ready
- API requests are only sent when this flag is true
- The UI thread sends a UI_READY_FOR_API event when it's ready to handle requests
- Handling requests through the UI: I've implemented an API service in the UI that handles requests and returns results to the main thread.
- Adding domains in manifest.json: I've added the following domains in the manifest:
"networkAccess": {
"allowedDomains": [
"https://api.lemonsqueezy.com",
"https://*.lemonsqueezy.com",
"https://api-cors-anywhere.lemonsqueezy.com"
]
}
Current Behavior
Questions
- Is there a correct way to handle external API requests in a Figma plugin to avoid CORS errors?
- Could there be a timing issue where requests are being executed before the UI is fully ready?
- Does anyone have experience integrating LemonSqueezy (or similar license management systems) into a Figma plugin using the toolkit Create Figma Plugin?
- Is there a better way to debug the communication flow between the main thread and the UI thread?