How to set up the DropListener component properly to work with CORS during development

I am using a DropListener component and learned in another thread that the backend URL is required and needs to point to a server that has fastify running.

Getting the files backend URL to work should be pretty easy. Provide the glitch url to your instance for the ‘files Backend Url’. It should be something like

That should work for the project when deployed on Glitch. It doesn’t work when using a local server however.

In order to get this working i had to go to my glitch instance, and modify the server.js file. First i had to install a ‘cors’ package on the glitch server via NPM:

npm i -D @fastify/cors

Then I had to modify the server.js file as follows:

near the top:

import cors from ‘@fastify/cors’

before the fastify.get sttement:

fastify.register( cors, {
origin: false // disable cors completely

this is a good place to test to see if it works

Assuming it does work, you can replace the origin line with something more specific and secure

fastify.register( cors, {
origin: [”, “

Original Post on Discord

by user 563549194137239552

Thanks for summarizing that here again - I think the cors package should be added to the template again, not sure right now why its not and if it was removed on purpose or a mistake. Maybe @herbst🌵 knows something about it? If not I’ll add it again

I use this a lot, might be what you need? idk

by user 103054507105067008