Develop Reference

Next JS API Routes add query on Client side

I am fetching IGDB api on server because I need to go through CORS. I am using async await connected to client side. Everything works fine but I need to pass query like '/?fields=cover.*,name;limit=50;' to https://api.igdb.com/v4/games from client side, not from server. When I am adding a query to client side, it's still showing the query only from server. How I can pass this query from client side? This is my code:
api/example.js
import Cors from "cors";
import initMiddleware from "../../components/init-middleware";
const cors = initMiddleware(
Cors({
methods: ['GET', 'POST', 'OPTIONS'],
})
)
const settings = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Client-ID': 'my_client-id',
'Authorization': 'Bearer my_authorization',
},
}
const remoteServerUrl = 'https://api.igdb.com/v4/games'
export default async function handler(req, res) {
await cors(req, res)
const response = await fetch(remoteServerUrl, settings);
const data = await response.json()
res.json(data)
}
client side
const settings = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Client-ID': 'my_client-id',
'Authorization': 'Bearer my_authorization',
},
const fetchData = async () => {
let query = '/api/example/'
const response = await fetch(query + HERE I WANT TO ADD QUERY, settings);
const data = await response.json();
}
Edit:
Status Code: 308 Permanent Redirect
initMiddleware
// Helper method to wait for a middleware to execute before continuing
// And to throw an error when an error happens in a middleware
export default function initMiddleware(middleware) {
return (req, res) =>
new Promise((resolve, reject) => {
middleware(req, res, (result) => {
if (result instanceof Error) {
return reject(result)
}
return resolve(result)
})
})
}

Compose the correct FormData request

By sending a request to the server through the postman everything works:
When trying to send the same request through the client, the req.body on the server is equal to an empty object:
const img = ev.target.files[0];
const body = new FormData();
body.append('image', img);
body.append('user', localStorage.getItem('user'));
const data = await (await fetch(`${root}/api/upload/profile`, {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data;'
},
body
})).json();
/profile route:
router.post('/profile',
cors(corsOptions),
async(req, res) => {
upload(req, res, async err => {
try {
console.log(req.body) // {}
} catch (err) {
console.log(err.stack)
}
});
}
);

how to GET responses when data post to URL in nodejs as req.body.url

I want to get data from the URL I have entered as req.body.url inside the body of postman collection tool
how do I get the response
I have a key as URL and the value as live URL see the below screenshot
const options = {
url: req.body.url,
method: 'post',
headers: {
'Accept': 'application/json',
'Accept-Charset': 'utf-8',
'User-Agent': 'my-reddit-client'
}
};
request(options, function(err, res, body) {
let json = JSON.parse(options);
res.send(json);
console.log(json);
});
tried above code but it does reads the URL and does not provide the data as response

use this :
var request = require('request');
const options = {
url: req.body.url,
method: 'post',
headers: {
'Accept': 'application/json',
'Accept-Charset': 'utf-8',
'User-Agent': 'my-reddit-client'
}
};
request(options, function (error, response) {
if (error) throw new Error(error);
console.log(response.body);
});
Note that request is asynchronous

Is there a way for filer API endpoint JSON response?

I have an external API endpoint that uses basic authentication that I'm trying to find a specific key and/or value of from the JSON response.
Results:
hrefsOnly returns an array with two items.
[
"https://192.168.254.133/api/json/v2/types/volumes/1",
"https://192.168.254.133/api/json/v2/types/volumes/3"
]
Calling hrefsOnly[1] shows the following JSON response:
{ "content": {
"ancestor-vol-name": null,
"small-io-alerts": "disabled",
"last-refreshed-from-obj-name": null,
"small-iops": "0",
"wr-latency": "1738",
"obj-severity": "information"
}}
volumeInfo is undefined in my code is below:
const express = require('express');
const app = express();
const request = require("request");
const bodyParser = require('body-parser');
const auth = 'YWRtaW46WHRyZW0xMA==';
//Get Volume api endpoint values
var getVols = {
method: 'GET',
url: 'https://192.168.254.133/api/json/v2/types/volumes/',
headers:
{
'cache-control': 'no-cache',
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: `Basic ${auth}`
}
};
//Get above api endpoint data
var volsData = {
method: 'GET',
url: 'https://192.168.254.133/api/json/v2/types/volumes/1',
headers:
{
'cache-control': 'no-cache',
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: `Basic ${auth}`
}
};
var hrefsOnly = [];
var volumeInfo = [];
//GET request to parse hfref data only
request(getVols, function (error, response, body) {
var data = JSON.parse(body);
if (error){
console.log('error: ', error);
} else {
for(var i = 0; i < data["volumes"].length; i++){
hrefsOnly.push(data["volumes"][i].href);
}
}
});
app.get('/url', (req, res, next) => {
res.send(hrefsOnly);
});
// GET Volumes JSON response
request(volsData, function (error, response, body) {
var vols = body;
if (error){
console.log('error: ', error);
} else {
for(var elem in vols){
volumeInfo.push(vols);
}
}
});
app.get('/volume', (req, res, next) => {
console.log(volumeInfo["content"]);
res.send(volumeInfo["content"]);
});
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
app.listen(3000, () => {
console.log("Server running on port 3000");
});
I expect when I visit the page localhost:3000/volume to return the content section from the API. the page shows blank though.
console.log(volumeInfo[1]) shows the JSON data, but volumeInfo[1].content is undefined. Not sure what I'm doing to get 'undefined' as the result.

You declared an array var volumeInfo = []; but you're using it as a map res.send(volumeInfo["content"]);
TTo access an element inside an array, you need an index (integer). Try with res.send(volumeInfo[0].content);

OAuth "unsupported_grant_type" Discord API

I'm trying to make the discord OAuth work. In the doc, it is necessary to generate a code, it works very well this step but after it is to generate the token. It asks to make a POST request with the right parameters but it always brings me the error: {"error":"unsupported_grant_type"}
My code:
app.get('/discord/callback', async function (req, res) {
if (req.query.code === undefined || req.query.code == '') return next();
const response = await fetch("https://discordapp.com/api/v6/auth2/token", {
method: 'POST',
headers: {
"Content-type": "application/x-www-form-urlencoded"
},
data: {
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
code: req.query.code,
redirect_uri: redirect,
grant_type: "authorization_code",
scope: "identify"
}
});
const json = await response.json();
debug('%O', json);
res.send(json);
});
Doc:
def exchange_code(code):
data = {
'client_id': CLIENT_ID,
'client_secret': CLIENT_SECRET,
'grant_type': 'authorization_code',
'code': code,
'redirect_uri': REDIRECT_URI,
'scope': 'identify email connections'
}
headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
r = requests.post('%s/oauth2/token' % API_ENDPOINT, data, headers)
r.raise_for_status()
return r.json()
Thanks for your help

Your headers are:
headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
which means that it also expects the data as form data and NOT json.
So this should work:
app.get('/discord/callback', async function (req, res) {
if (req.query.code === undefined || req.query.code == '') return next();
const params = new URLSearchParams();
params.append('client_id', process.env.CLIENT_ID);
params.append('client_secret', process.env.CLIENT_SECRET);
params.append('grant_type', 'authorization_code');
params.append('code', code);
params.append('redirect_uri', redirect);
params.append('scope', 'identify');
const response = await fetch("https://discordapp.com/api/v6/auth2/token", {
method: 'POST',
body: params
headers: {
"Content-type": "application/x-www-form-urlencoded"
},
});
const json = await response.json();
debug('%O', json);
res.send(json);
});
You can refer this for better understanding: https://www.npmjs.com/package/node-fetch#post-with-form-parameters

I encountered this issue today as well, and inspired by Aakash Sharma's answer, I build a little utility function(in typescript) that will convert an object to that required format:
export const jsonToUrlParams = (data: Record<string, any>) => {
const params = new URLSearchParams();
for (const key in data) {
params.append(key, `${data[key]}`);
}
return params;
};