Vengeance•2y ago

tRPC Call To Server

On the mobile version of my app, in NextJS, the build has to be static so I have to use my hosted web version ass the server url, but when it makes requests it says stuff like no query procedure found, whereas in the web version the request works just fine, I think it's because the static version of the app doesn't request with any cookies. How can I solve this?

2 Replies

VengeanceOP•2y ago

https://trpc.io/docs/cors

Send cookies cross-origin | tRPC

If your API resides on a different origin than your front-end and you wish to send cookies to it, you will need to enable CORS on your server and send cookies with your requests by providing the option {credentials: "include"} to fetch.

VengeanceOP•2y ago

me when i dont read docs: 🧍‍♂️

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader("Access-Control-Request-Method", "*");
  res.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET");
  res.setHeader("Access-Control-Allow-Headers", "*");
  if (req.method === "OPTIONS") {
    res.writeHead(200);
    return res.end();
  }

  return nextApiHandler(req, res);
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader("Access-Control-Request-Method", "*");
  res.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET");
  res.setHeader("Access-Control-Allow-Headers", "*");
  if (req.method === "OPTIONS") {
    res.writeHead(200);
    return res.end();
  }

  return nextApiHandler(req, res);
}

still getting response body is not available to scripts (Reason: CORS No Allow Credentials) 😔 found the answer here https://canary.discord.com/channels/867764511159091230/1067565106080264232/1067743471554809897