Current versus Expected behavior

I've set up restrictions on the Google API to only allow requests from my website by specifying the website URL. However, when I deploy the app on Vercel, the restriction seems to block access from the website. The app works fine in the deployed environment if I remove the restriction, but I'd prefer to keep it in place for security. Could you please advise on how I can resolve this issue?

Code, configuration, and steps that reproduce this issue

Vercel Deploy Plan: -> Hobby Steps to reproduce:

1. Go to Google API dashborad
2. Choose my API key for this project
3. Go to Restriction section
4. Choose website
5. Add website: *.example.vercel.app/*
6. Save

Project information

1
Environment (local, preview, production): production
2
Node/Runtime Version: node 20.x
3
Package Manager: npm
4
Project Framework: Next.js v14