Access to Jira API

Plugin and Widget API Questions
#1

Hey folks,

I am working on a small Figma plugin and would like to access information (status, name) of Jira tickets. However, when I try to fetch data I get the CORS error

Access to fetch at 'https:/my-company.atlassian.net/rest/agile/1.0/issue/DT-25' from origin 'https://www.figma.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The Figma docs say the following

Note: because Figma and Figma plugins run inside a browser environment, Cross-Origin Resource Sharing policies apply. Plugins run inside an iframe with a null origin. This means that they will only be able to call APIs with Access-Control-Allow-Origin: * (i.e., those that allow access from any origin). In the example above, we use a CORS proxy for simplicity, but it’s not something you generally need to or should use.

Does this mean that ultimately I will not be able to access Jira (unless they add the Access-Control-Allow-Origin: * on the server side)? Or is there any way to get around this?

Thanks :slight_smile:

1 Like
#2

I’m also working on the same thing, but with Confluence. Has anyone set up a working proxy or found a way to provide an origin to get this working?

#3

Unfortunately there is no simple turnaround. You cannot access any API with CORS directly from the Figma plugins.
You have to create proxy server or serverless function to access Jira API and then pass those data to your plugin.

I would suggest you to check Firebase functions as the simplest way to deploy: Get started: write, test, and deploy your first functions

As an example

Inside your function:

import axios from 'axios'
import functions from 'firebase-functions'

exports.getIssue = functions.https.onRequest(async (req, res) => {
  const { issueId } = req.body
  const { data } = await axios.get(`https:/my-company.atlassian.net/rest/agile/1.0/issue/${issueId}`)
  return data
})

Inside your plugin:

function getIssue() {
  const issueId = 'DT-25'

  fetch(`${firebaseApiUrl}/getIssue`, { issueId })
  .then((response) => {
    return response.json()
  })
  .then((data) => {
    // do whatever you want with this data
  })
}
1 Like