xiduzo Posts - Answer Overflow

xiduzo

•Created by xiduzo on 5/24/2024 in #questions

t3-stack in figma plugin?

I want to use the t3-stack to write my figma plugin UI but I am struggling to use the trpc client. I am getting a

from origin 'null' has been blocked by CORS policy

from origin 'null' has been blocked by CORS policy

when calling trpc.post.hello.useQuery({ text: "world" }); for

// Figma UI
const client = trpc.createClient({
    httpBatchLink({
      url: "http://localhost:3000/api/trpc",
      transformer: SuperJSON,
      headers: () => {
        const headers = new Headers();
        headers.set("x-trpc-source", "figma-plugin-ui");
        headers.set("Access-Control-Allow-Origin", "*");
        return headers;
      },
    }),
  ],
});

// next app api/[trpc]/route.ts
const createContext = async (req: NextRequest) => {
  req.headers.set("Access-Control-Allow-Origin", "*");
  req.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  req.headers.set("Access-Control-Allow-Headers", "*");
  return createTRPCContext({
    headers: req.headers,
  });
};

// Figma UI
const client = trpc.createClient({
    httpBatchLink({
      url: "http://localhost:3000/api/trpc",
      transformer: SuperJSON,
      headers: () => {
        const headers = new Headers();
        headers.set("x-trpc-source", "figma-plugin-ui");
        headers.set("Access-Control-Allow-Origin", "*");
        return headers;
      },
    }),
  ],
});

// next app api/[trpc]/route.ts
const createContext = async (req: NextRequest) => {
  req.headers.set("Access-Control-Allow-Origin", "*");
  req.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  req.headers.set("Access-Control-Allow-Headers", "*");
  return createTRPCContext({
    headers: req.headers,
  });
};

when I set the mode to no-cors the OPTIONS request is coming through

const client = trpc.createClient({
// ...
fetch: (url, options) => {
        return fetch(url, {
          ...options,
          mode: "no-cors",
        });
      }
})

const client = trpc.createClient({
// ...
fetch: (url, options) => {
        return fetch(url, {
          ...options,
          mode: "no-cors",
        });
      }
})

But then I am getting the error TRPCClientError: Unexpected end of input

2 replies

Gaming

Programming