Skip to main content
Question

Access to Jira API

  • October 4, 2021
  • 4 replies
  • 3342 views

Lukas_B

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 🙂

This topic has been closed for replies.

4 replies

Jared_Steffen

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?


tonypinkevych

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
  })
}

This error typically occurs in web development when making cross-origin requests. This error is related to the same-origin policy implemented by web browsers for security reasons. The same-origin policy restricts web pages from making requests to a different domain unless the server explicitly allows it by including the ‘Access-Control-Allow-Origin’ header in the response. To resolve this issue, the server hosting the requested resource needs to include the appropriate ‘Access-Control-Allow-Origin’ header, specifying the domain or origins allowed to access the resource. This can be done by configuring the server’s response headers or by using server-side middleware or frameworks that handle cross-origin requests.

JSON with Padding is just a way to circumvent same-origin policy, when CORS is not an option. This is risky and a bad practice. Avoid using this.

If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999


  • 4 replies
  • September 12, 2023

What did you end up doing? Funny enough I might be building something similar. I want to get tasks from notion to Figma. Let me know if you have advice.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings