eneble cors with trpc and next

[Mremmalex]

i have a site in next hosted on netlify but i can't make any request because the cors blocking, how can i solve this problem

[KATT]

Paste the question you wrote above on google and that should provide better answer than what we can do here

[KATT]

Never used amplify. Maybe the Lambda-adapter can help you https://github.com/trpc/trpc/tree/main/packages/server/adapters/lambda

I don't have the bandwidth to provide more guidance unfortunately

[Mremmalex]

@joecoker go to your _app.js change the remote your to the amplify url , thats was my problem i was targeting a url that was not set

[wiredmatt]

I can't get cors working on local development neither, I tried the following

// src/pages/api/trpc/[trpc].ts
import { createNextApiHandler } from '@trpc/server/adapters/next'
import { appRouter } from '../../../server/router'
import { createContext } from '../../../server/router/context'

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext: createContext,
  responseMeta(ctx) {
    ctx.ctx?.res?.setHeader(
      'Access-Control-Allow-Origin',
      '.brand.localhost'
    )
    ctx.ctx?.res?.setHeader('Access-Control-Request-Method', '*')
    ctx.ctx?.res?.setHeader(
      'Access-Control-Allow-Methods',
      'OPTIONS, GET'
    )
    ctx.ctx?.res?.setHeader('Access-Control-Allow-Headers', '*')

    if (ctx.ctx?.req?.method === 'OPTIONS') {
      ctx.ctx?.res?.writeHead(200)
    }

    return {
      headers: ctx.ctx?.res?.getHeaders() as Record<
        string,
        string
      >,
      statusCode: ctx.ctx?.res?.statusCode || 200
    }
  }
})

I then have another next.js app from which I would like to consume this TRPC API, is it possible?

[joaobibiano]

It didn't work here 😢

Have you managed another way to make it works?

[wiredmatt]

Nope, I gave up on trpc as I doesn't suit basic business requirements for now, or at least they are not well documented. I'm using a custom hooks generator from an open-api schema, this was my starting point. I have recently stumbled across this package, which does essentially the same trpc does but in a more traditional way. Finally there's this other which is intended to work with an expressjs backend. I think both of these options are better for scaling and if you have multiple microfrontends, I couldn't get trpc to work due to the cors issue

[fortezhuo]

Hi,

Currently, I am playing tRPC and NextJS. And here the wrapper.

import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next';
import Cors from 'cors';

const cors = Cors();

function runMiddleware(req: NextApiRequest, res: NextApiResponse, fn: any) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result: any) => {
      if (result instanceof Error) {
        return reject(result);
      }

      return resolve(result);
    });
  });
}

export function withCors(handler: NextApiHandler) {
  return async (req: NextApiRequest, res: NextApiResponse) => {
    await runMiddleware(req, res, cors);

    return await handler(req, res);
  };
}

And [trpc].ts

export default withCors(
  trpcNext.createNextApiHandler({
    router: appRouter,
    ....
    ....
}))

Hope this snippet solves your problem

[Jaaneek]

@fortezhuo Is there anything else needed to make it work? It works on localhost but does not on vercel deployment

[fortezhuo]

@Jaaneek
You can take a look at https://vercel.com/guides/how-to-enable-cors . Hope the link solves your problem

[shahzaibfs]

You can use cors like that.
haven't tested this personlly but you can assign response headers like that .
and please do let me know if you found this helpful.

[kippytech]

@shahzaibfs where did you get or import from that createTRPCContext? I'm getting an error as I try to follow your code snippet

[zendostrike]

For Nest.js: Be sure to enable cors before TRCP applyMiddleware. If you set enable cors after trcp, your trcp requests won't work.

const app = await NestFactory.create(AppModule);
app.enableCors();

const trpc = app.get(TrpcRouter);
trpc.applyMiddleware(app);