It should return this:
What’s going on?
I think fetch must be use asynchronously
(async() => {
let response = await fetch(url);
if (response.ok) { // if HTTP-status is 200-299
// get the response body (the method explained below)
let json = await response.json();
} else {
alert("HTTP-Error: " + response.status);
}
})();
Source: https://javascript.info/fetch
1 Like
Yeah, it was something weird with my browser not using promises.
hm.
So much for making my own API ;-;
Anyone know how to resolve this issue?
I think it might be because your API might have cross-origin requests disabled. You need to enable CORS for your API so that it can be accessed from other websites and origins.
I tried sending GET requests to the API endpoint using Hoppscotch (aka Postwoman) with proxy enabled, but I still got CORBed.
If you’re using Express, you can use the cors module.
$ npm install cors
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
// rest of your code
More info here: http://expressjs.com/en/resources/middleware/cors.html
2 Likes
In your first example screenshot that shows 404, you missed out hex from the URL, putting /api/8adaff whereas your successful in-browser request shows /api/hex/8adaff. Does that make a difference?
1 Like
Hi, when you use fetch, printing out the the response also prints out a bunch of information you don’t need, such as status codes and all that, and I think it omits the actual response.
Can you try using
.then(res => console.log(res.json))
instead?
I put
const cors = imports.cors //imports file loaded above
app.use(cors())
into every file - it still didn’t work. When I send a request to /api/8adaff its supposed to redirect to /api/hex/8adaff. Any ideas what’s going on? Here’s an edit link: glitch.com/edit/#!/ibex?path=controller.js
fetch("ibex.glitch.me/api/8adaff")
.then(res => {console.log(res)})
.catch(e => console.log(e))
@SteGriff /api/8adaff redirects to /api/hex/8adaff…
1 Like
As @Pufferfish101007 has mentioned, convert the response to JSON before playing with it.
fetch("ibex.glitch.me/api/8adaff")
.then(res => {res.json()})
.catch(e => console.log(e))
It returns undefined, though - any more ideas?
fetch("ibex.glitch.me/api/8adaff")
.then(res => {res.json()})
.then(a => console.log(a))
.catch(e => console.log(e))
At least there aren’t any errors…
fetch("https://ibex.glitch.me/api/8adaff") // add https://
.then(res => {res.json()})
.then(a => console.log(a))
.catch(e => console.log(e))
One thing I noticed in your code was this:
app.get("/api/:color", (req, res) => {
var color = req.params.color.toLowerCase()
console.log(color)
if (color.slice(0, 1) == "#" || regex.test(color)) {
res.redirect(`/api/hex/${color}`)
} else if(!color) {
res.send({error: true, msg: "input cannot be empty"})
} else {
res.redirect(`/api/string/${color}`)
console.log(`going towards /string/${color}`)
}
//res.redirect(`/hex/${color}`)
})
Either way, in both the if and the else block, you’re redirecting to an endpoint and the code of that endpoint has been commented out.
Oh, the code for those endpoints is contained in the ./getColors folder. Thanks so much for helping me! Still getting some weird stuff though:
Thanks to your CORS code, the status is 200, but res.json is undefined or just “0”. Any more ideas?
Instead of res.json(), try res.text() so that we can at least see the response in plain-text format.
I tried that too, using res.text() - it still returns “undefined”.
Perhaps this is an issue with my code? When I receive a request, it returns an object like res.send(obj).
You’d have to use either .then(res => res.json()) without the {} or .then(res => { return res.json(); }) with a return. Otherwise it’ll take that promise from .json() and discard it.
1 Like
Ohhh, I missed that pair of brackets hanging out there!
2 Likes