Skip to main content
Question

Plugin won't connect to API


Hello!
I am trying to hookup a plugin to an API.

Basically, I am extracting the local variables from a Figma file and I want to store them in a database. Thus far, I am able to get the variables to my codebase.

I have also built a simple API that adds a row to my database. I know that the API works because I have tested it in Postman and get the expected response.

The function to use this API call in the code looks like this:

async function sendJSONToDB(files) {
  console.log("in download"); // this prints, so I know I have entered the function
  const response = await fetch('http://localhost:3000/api/v1/addColorsRecord', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    },
    mode: 'no-cors', // new line
    body: JSON.stringify({
      json_data: files.json_data
    })
  });
  console.log("past fetch") // this does not print, so I never get past the fetch call
  const data = await response.json();

  console.log(data);
 }

Where “files” is an object that looks like this:

let files = {
      json_data: "{}",
      type: "DOWNLOAD"
}

The API function I am calling looks like this:

//POST Method
const addColorsRecord = async (req, res, next) => {
        let conn;
        console.log("in addColorsRecord") // this does not print, so I don't even enter this function
  try {
	conn = await pool.getConnection();
	await conn.query("INSERT INTO COLOR value (?, ?, ?)", [null, req.query.json_data, getCurrentDateTime()]);
    console.log("something has happened")
        const newColorEntry = {
            json_data: req.query.json_data,
            created_on: getCurrentDateTime(),
        };
        res.json(newColorEntry);
    } catch (e) {
        next(e);
    }
};

router.route("/api/v1/addColorsRecord").post(addColorsRecord);

So, any help to figure out why the fetch call is not going through would be much appreciated!
Thanks!

3 replies

Gleb
  • Power Member
  • 4706 replies
  • March 16, 2024

What error are you getting? Did you set up CORS on the server to allow access from any origin (which is null in the plugin)?


  • Author
  • 4 replies
  • March 16, 2024

Hi @Gleb that’s part of the weird thing… there is no error… it just seems to exit…

That being said, per your other point, I was getting the classic CORS error:

Access to fetch at 'http://localhost:3000/api/v1/addColorsRecord' from origin 'null' 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.

But I added in the lines:

    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    },
    mode: 'no-cors', // new line

But now it just never makes it.


Gleb
  • Power Member
  • 4706 replies
  • March 17, 2024

Reply


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