How to allow 3rd party apps to send POST requests to your API

I'm exporting data from a 3rd party app which sends a POST request to an api in my app. The problem is it works when I test it locally by exposing my local port through ngrok but when I deploy to Vercel my endpoint doesn't get hit at all and I get an error from the 3rd party app with a not so helpful error message. I've explored messing with CORS but that didn't fix it, assuming that I'm modifying the CORS settings correctly.
21 Replies
Grey
Grey12mo ago
For me to properly eval. the situation, you'll have to give more details on : - how your POST api endpoint is set (some snippet) - how a 3rd party app is requesting that endpoint because with API endpoints, cors is not an issue, cors is only for the clientside browser JS scripts from one domain(example.com) making request to domains which are not example.com
WO
WO12mo ago
import { NextApiRequest, NextApiResponse } from "next";
import { prisma } from "~/server/db";

export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const leagueUrl: string = req.query.leagueUrl as string;
const leagueId: string = req.query.leagueId as string;
const platform: string = req.query.platform as string;
console.log("League url", leagueUrl);
console.log("League id", leagueId);
console.log("League platform", platform);
console.log("Req body: ", req.body);

const league = await prisma.league.findUnique({
where: { leagueSlug: leagueUrl },
});

// Make sure the league is registered in our database
if (!league) {
return res.status(404).json({ message: "League not found" });
}

// Case where the league hasn't had any data imported yet
if (league.leagueId === null) {
await prisma.league.update({
where: { leagueSlug: leagueUrl },
data: { leagueId: leagueId, platform: platform },
});
} else if (league.leagueId !== leagueId) {
// Case where the league has already been imported but the leagueId doesn't match
return res.status(400).json({ message: "Invalid export" });
}

res.status(200).json({ message: "Hello from Next.js!" });
}
import { NextApiRequest, NextApiResponse } from "next";
import { prisma } from "~/server/db";

export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const leagueUrl: string = req.query.leagueUrl as string;
const leagueId: string = req.query.leagueId as string;
const platform: string = req.query.platform as string;
console.log("League url", leagueUrl);
console.log("League id", leagueId);
console.log("League platform", platform);
console.log("Req body: ", req.body);

const league = await prisma.league.findUnique({
where: { leagueSlug: leagueUrl },
});

// Make sure the league is registered in our database
if (!league) {
return res.status(404).json({ message: "League not found" });
}

// Case where the league hasn't had any data imported yet
if (league.leagueId === null) {
await prisma.league.update({
where: { leagueSlug: leagueUrl },
data: { leagueId: leagueId, platform: platform },
});
} else if (league.leagueId !== leagueId) {
// Case where the league has already been imported but the leagueId doesn't match
return res.status(400).json({ message: "Invalid export" });
}

res.status(200).json({ message: "Hello from Next.js!" });
}
Here is an example of the API endpoint The 3rd party app asks for a base url and then it adds on some extra stuff to the url to make it unique. ex) I give the 3rd party app https://example.com/api/exampleRoute The 3rd party app tacks on /[platform]/[leagueId] to it to make it unique so the resulting url is https://example.com/api/exampleRoute/[platform]/[leagueId]
Grey
Grey12mo ago
and where is this api endpoint situated in your file structure? the root src dir starting from pages or app
WO
WO12mo ago
pages
Grey
Grey12mo ago
so in pages is it in the /api/exampleRoute/[platform]/[leagueId]/api.ts? *I forgot the pages notation hold up
WO
WO12mo ago
Yea thats right.
Grey
Grey12mo ago
it should be in /api/exampleRoute/[platform]/[leagueId].ts *what I meant so if it's there and it's deployed to vercel, then you should be able to simply POST to it also
WO
WO12mo ago
Yea thats how I have it setup
Grey
Grey12mo ago
in the starting of the api handler oh wait nvm it's not a json request anyways now that that's confirmed, can you show me a stack trace of the thrown error? if possible
WO
WO12mo ago
Gotcha. Also something to note is im doing this on a Vercel preview deployment not sure if that matters
Grey
Grey12mo ago
as long as the endpoint is exposed, it should be requestable I haven't worked with vercel deployments other than once or twice, so I can't say for sure
WO
WO12mo ago
There isnt much of a stack trace because on the vercel logs it doesnt even show that my endpoint is being hit even though i put in the base url that it generated
Grey
Grey12mo ago
did you try to test a request via curl or wget? to your api endpoint?
WO
WO12mo ago
Im not familiar with that but I can try it now
Grey
Grey12mo ago
just use a rest client anything, postman, insomnia etc. or thunder client, the one vscoders use
WO
WO12mo ago
Im getting a 200 from postman
Grey
Grey12mo ago
is the response okay? other than the 200 the body, headers etc. if they are, then there's and issue with the way the 3rd party is requesting at your endpoint your api is properly setup
WO
WO12mo ago
Yea there is something going wrong between the 3rd party and Vercel I think because the 3rd party works fine with ngrok
Grey
Grey12mo ago
wait.... did you test to a local http url or the vecel one?
WO
WO12mo ago
the vercel deployment url
Grey
Grey12mo ago
then your 3rd party client is not properly requesting