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

🌵 Needle Engine
1

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 https://.glitch.me

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: [
“https://glitch.com”, “https://192.168.1.93:3001”
]
});

Original Post on Discord

by user 563549194137239552

2

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

3

I use this a lot, might be what you need? idk https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

by user 103054507105067008