CORS issue Vercel Blob client side

(edited)

Hi Anshuman,

I'm still stuck with this - getting a CORS error when using the SDK head() function. To reiterate I'm running the client locally.

Here is the calling code:

import { put, head, list } from '@vercel/blob';
export async function fetchDiagnosticsBundle(bundleTraceID) {
  const key = diagnosticBundleKey(bundleTraceID)

  try {
    // @ts-ignore
    const response = await head(key, blobCommandOptions());
    const respJSON = Response.json(response);
    debugger;
  } catch (e) {
    console.log(`fetchDiagnosticsBundle() failed with error: ${e}`)
  }
  return 42 // todo
}

Here is my project's vercel.json

{
    "headers": [
        {
            "source": "/api/blob",
            "headers": [
                {
                    "key": "Access-Control-Allow-Origin",
                    "value": "http://localhost:5173"
                },
                {
                    "key": "Access-Control-Allow-Methods",
                    "value": "HEAD, GET, POST, PUT, DELETE, OPTIONS"
                },
                {
                    "key": "Access-Control-Allow-Headers",
                    "value": "Content-Type, Authorization"
                }
            ]
        }
    ]
}```

And here is the reported error from the browser's console:

19:26:45.928 localhost/:1 Access to fetch at 'https://vercel.com/api/blob?url=diagnosticbundle%2Fdae25d01-5e7d-4f48-95e9-c2dc5c1031e6' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 19:26:45.928 serverstorage.js:45 GET https://vercel.com/api/blob?url=diagnosticbundle%2Fdae25d01-5e7d-4f48-95e9-c2dc5c1031e6 net::ERR_FAILED 200 (OK) blobFetch @ .js?v=1ce2011b:634 blobRequest @ .js?v=1ce2011b:731 (anonymous) @ .js?v=1ce2011b:927 runAttempt @ .js?v=1ce2011b:272 RetryOperation.attempt @ .js?v=1ce2011b:111 run @ .js?v=1ce2011b:281 retry2 @ .js?v=1ce2011b:283 requestApi @ .js?v=1ce2011b:923 head @ .js?v=1ce2011b:1634 fetchDiagnosticsBundle @ serverstorage.js:45 handleFetchDiagnosticsDump @ handlewasmrecoverableerror.js:55```

I made sure to push the vercel.json to my main branch - and as you will see, a deployment was triggered.

ps here's the referenced blobCommandOptions() function:


function blobCommandOptions() {
  let options = {
    access: 'public',
  }
  if (tokenForLocalDev) {
    options.token = tokenForLocalDev;
  }
  return options
}```

Hi Anshuman, did you see that I got stuck again with this (on a CORS problem)

Vercel Staff

Hi , I've moved this post to a new topic for better reach.

The CORS error are their by design for security reasons. I'd recommend using a server side environment to get the downloadURL for the files and then use them on the client side. I hope this helps.

Thanks Anshuman, My product doesn't have a server side backend. I'm trying to avoid that. It's a content creation website implemented entirely client side as a statically served SPA. It lets you create technical drawings. It uses Google identity and Auth services and the user's own Google Drive for storage. Conceptually , it's Google Docs - reimagined for technical drawings.I've been trying to use Vercel blob storage for a niche corner case. When the app hits a recoverable error, it captures a whole bunch of contextual information to support debugging the issue. (A diagnostics dump). So what I wanted to do was persist that data in the blob store with a client side put() (which works fine), and then and use a Vercel cron job to observe the arrival of a new diagnostics dump and alert me. Given the Working put() operation, can you suggest any other alerting mechanism? I could manage with a manual fetch operation if I was alerted, from the Vercel dashboard. Ps. I'm also hoping to avoid having to subscribe to an email sending service. The motivation for my stance is that if it succeeds, the platform operating costs are close to zero, even if the site acquires a very large user base.

Vercel Staff

Hi , the put operation is client side friendly. If you want to be notified when a new diagnostics dump is created, why not directly send yourself an alert on Slack/email/whatever else you use. You can also use the Vercel Cron Jobs to read the bucket in the backend. You don't need a whole lot of server, just a single api/index.js file will be enough to run this logic. And because of Vercel's serverless pricing model you will only be charged for active CPU based on number of executions. I don't see any downside of doing a minimal setup.

On a side note: exposing the put and the token on the client side is risky because anyone can grab it and start uploading files to your Blob storage. You can learn about safe client side uploads on our https://vercel.com/docs/vercel-blob/client-upload docs.

This topic is closed. It no longer accepts new replies.

import { put, head, list } from '@vercel/blob'; export async function fetchDiagnosticsBundle(bundleTraceID) { const key = diagnosticBundleKey(bundleTraceID) try { // @ts-ignore const response = await head(key, blobCommandOptions()); const respJSON = Response.json(response); debugger; } catch (e) { console.log(`fetchDiagnosticsBundle() failed with error: ${e}`) } return 42 // todo }

{ "headers": [ { "source": "/api/blob", "headers": [ { "key": "Access-Control-Allow-Origin", "value": "http://localhost:5173" }, { "key": "Access-Control-Allow-Methods", "value": "HEAD, GET, POST, PUT, DELETE, OPTIONS" }, { "key": "Access-Control-Allow-Headers", "value": "Content-Type, Authorization" } ] } ] }``` And here is the reported error from the browser's console: