Next.js Discord

Discord Forum

How can I access two different vercel blob storages at the same time?

Answered
rand posted this in #help-forum
Open in Discord
randOP
I have two vercel blob storages, one for image upload and the other for hosting static pictures.
I was connected to one blob storage by setting BLOB_READ_WRITE_TOKEN in the .env file. But I'm not sure how to connect to the other one.
Answered by Ray
you can pass the token to the option, it use BLOB_READ_WRITE_TOKEN as default if you don't provide it
list({token: 'BLOB_READ_WRITE_SECOND_BLOB_TOKEN'})

put('', '', {token: 'BLOB_READ_WRITE_SECOND_BLOB_TOKEN'})
View full answer

16 Replies

@rand I have two vercel blob storages, one for image upload and the other for hosting static pictures. I was connected to one blob storage by setting BLOB_READ_WRITE_TOKEN in the .env file. But I'm not sure how to connect to the other one.
Ray
you can pass the token to the option, it use BLOB_READ_WRITE_TOKEN as default if you don't provide it
list({token: 'BLOB_READ_WRITE_SECOND_BLOB_TOKEN'})

put('', '', {token: 'BLOB_READ_WRITE_SECOND_BLOB_TOKEN'})
Answer
randOP
Access to fetch at 'https://blob.vercel-storage.com/?' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled
Ray
are you fetching the blob on browser?
randOP
Yes, I am.
Or do i need to fetch that from next api router ?
@rand Or do i need to fetch that from next api router ?
Ray
yes
your token is going to expose to client if you are fetching on browser
randOP
I see. yeah, lemme try it out asap!
randOP
// excutionItems.ts
import { list } from "@vercel/blob";
import type { NextApiRequest, NextApiResponse } from "next";

type ResponseData = {
  message: string;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  const response = await list({
    token: process.env.EXECUTION_ITEMS_READ_WRITE_TOKEN,
  });
  console.log(response);
  return response;
}
// execution page
const getItems = async () => {
    const response = await fetch(`/api/executionItems`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });
    console.log(response);
  };

  useEffect(() => {
    getItems();

    return () => {};
  }, []);
But nothing was logged... ;/
ah, that was logged on the backend.
randOP
Yes. I am.