hi, i’m a classical nublet as nooby as they come at node.js and I have a generator on perchance I want to make a server for. Searches have brought me to here and I would like to ask, “in the Discover tab there is an SQLite starter database. This seems to be what I need, so I select it and it starts up and I touch the ‘make real’ button and it works. But how do I connect my cool generator on Perchance to it? Essentially I am using ‘vanilla’ javascript and want to reach the api i make here and, from the perchance page, be able to save something to here and also be able to read it back.”
Hi @Allo, welcome! I’ve never coded with Perchance before but I did some searching on Glitch to see if there were any apps you could remix from and it turns out that Perchance has a doc on…how to set up a server on Glitch! This may point you in the right direction: DIY Perchance API ― Perchance Generator
1 Like
hi jenn, thank you! that’s where i learned of Glitch and why I’m here, lol.
my issue seems to be connecting to the api here in general.
i made this little meowbrary, which is the base sqlite here on glitch.
I have used alot of javascript and never once been able to get in to put, post, get, etc.
I looked up with internets that these two should work and the top is get maybe and the bottom is post.
//fetch('https://meowbrary.glitch.me').then(response => response.json()) .then(data => alert(data)) .catch(error => alert(error));
fetch('https://meowbrary.glitch.me', { method: 'POST', headers: { 'Content-Type': 'application/json', 'admin_key': 'zarfnogladorium'}, body: JSON.stringify({ message: 'meow'}) }).then(response => response.json()).then(data => alert(data)).catch(error => alert(error));
i set my admin key to zarfnogladorium here on glitch. i do that line from my js of my page. and it says something like ‘fetch no worky’ as an error. As far as I know it should be posting meow in to the database and returning some nice message about how successful it is.
can you please simplify for me what the line of code i need is to get the data from glitch and what the line of code i need is to add data? It theoretically shouldn’t be harder than that but magically is for no reason.
Hahaha apologies for literally sending you in a circle!
So, if you want to make a fetch POST request to https://meowbarry.glitch.me, that means in the Glitch server you’ll want to have something like this, which is just a copy/paste of a “/message” post endpoint you already have in server.js:
// i replaced "/message" in the post argument with "/"
fastify.post("/", async (request, reply) => {
let data = {};
const auth = authorized(request.headers.admin_key);
if(!auth || !request.body || !request.body.message) data.success = false;
else if(auth) data.success = await db.addMessage(request.body.message);
const status = data.success ? 201 : auth ? 400 : 401;
reply.status(status).send(data);
});
So whatever you need to do with the data and send back you’d do within that code block.
1 Like
Also, for any GET requests like that first one, you’d want to make sure you have fastify.get("/", ... literally replacing “post” with “get” there.
1 Like
thank you i changed the Post
though still it gives the same error.
if you go to this page and touch edit, My Little Kitty ― Perchance Generator you can see the single line of code that is identical to what i copypasted above and see it do it’s error.
is there something wrong in fetch('https://meowbrary.glitch.me/', { method: 'POST', headers: { 'Content-Type': 'application/json', 'admin_key': 'zarfnogladorium'}, body: JSON.stringify({ message: 'meow'}) }).then(response => response.json()).then(data => alert(data)).catch(error => alert(error));
?
is there a hidden update button i need to push on glitch to update changes?
edit: i also made an identical github page in case perchance was messing stuff up, but same error.
thank you for all your help!
Are there any examples of the base SQLite and a working external page that uses it’s api from afar?
var xhr = new XMLHttpRequest();
// we defined the xhr
xhr.onreadystatechange = function () {
alert(this.readyState)
if (this.readyState != 4) return;
if (this.status == 200) {
var data = JSON.parse(this.responseText);
alert(data)
// we get the returned data
}
}
xhr.open('GET', 'https://meowbrary.glitch.me/', true);
xhr.send();
also this alerts 1, then alerts 4.
which i think means it isn’t getting feedback and thus isn’t connecting to glitch for some reason? even tho it’s a GET and the url is correct and the readme in the SQLite example says the GET has no requirements.
im basically trying all the ways.
none seem to work and it looks like none even connect
I opened up dev tools in my browser, and in the Network tab they show all requests (XHR would be the filter for fetch requests like this) and the request to Glitch fails due a CORS error. Let me see if I can find examples of perchance-node-api working on Glitch and see how they set their headers to allow Perchance to fetch to/from it.
1 Like
Okay, let’s try enabling CORS in that same code block before the rest of the code, so after the post:
fastify.post("/", async (request, reply) => {
// CORS headers
reply.header("Access-Control-Allow-Origin", "*");
reply.header("Access-Control-Allow-Methods", "POST");
// rest of the code
let data = {};
These two headers should give the Perchance app permission to access your API on Glitch’s server, or at the very least get rid of that CORS error.
1 Like
Fastify has a dependency to enable CORS universally (never used it but I think that’s what it does) but if we can get it to work for that POST (you can add it to GET too), then we’ll know if that makes things finally work
1 Like
sorry was away and gtg for hours. just added what you said to the server and still the same error. i also tried it on the sending side as headers and nothing.
interesting tho. i will try to look more in to it when i come back. seems very researchy. thank you for helping
interesting link. I basically am trying to get in to node now after trillions of years of not being able to. So that is an additional import that I add and, because it’s node, it grabs it from lightyears away and that one specifically allows me to customize the interface through which other sites touch the api? (and within that customization ability is whatever is causing the mismatch?) Sounds like an important import 
gtg bbl
I think it’s some thing where you need to respond to the OPTIONS preflight request. my browser notes:
1 Like
i have learned a trillion things tonight thank u both
just added my first node package. looked up all that stuff you mentioned.
still no worky, but will solve and make a how to so it isn’t nearly this hard for future people
solved and kept my progress as a resource for others, thank you
3 Likes
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.