Troubleshooting Vercel's caching of CORS headers across different domains

I currently have a Next.js API hosted on Vercel that is being utilized by various domains.

One issue I'm facing is when the browser sends the If-None-Match header, Vercel replies with a 304 status; however, the Access-Control-Allow-Origin header may contain a different origin, leading to a CORS error. This discrepancy seems to be caused by Vercel sending headers from the cached response.

My main concern is how to ensure the correct origin value will be specified in the Access-Control-Allow-Origin header without resorting to adding a proxy for each domain consuming the API.

cachingnext.jscorsvercelhttp-status-code-304

Answer №1

It appears that the issue lies in Vercel not including the request's origin in the cache key, leading to potential Web cache poisoning incidents. Unfortunately, Vercel currently does not offer the option for custom cache keys.

A viable long-term solution would be to advocate for Vercel to update their cache key structure to include the origin, following the example of other CDNs like Cloudflare. In the meantime, a temporary workaround could involve configuring your responses to CORS requests as non-cacheable based on Vercel caching rules:

{
  "name": "foo",
  "version": 2,
  "routes": [
    {
      "src": "/whatever",
      "headers": [
        { key: "Cache-Control", value: "no-cache" },
        ...
      ]
    }
  ],
  ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why doesn't Next.js provide an error message for Images missing the src property?

While Next.js is an amazing tool, it can occasionally present frustrating bugs for developers. In my current website project, I have utilized next/image in approximately 25 instances. Unfortunately, I am now encountering the following error message: Erro ...

next.js

Production facing issues with Clerk Middleware on Next 12.2.2 due to crashes

I've been struggling to understand the root cause of this issue, but I'm currently working on implementing Clerk Authentication using NextJS 12.2.2. Everything works fine in my development environment, but as soon as I move to production, my site ...

reactjsauthenticationnext.jsmiddlewareclerk

Exploring the process of retrieving data from localStorage in Next.js 13

Having recently delved into the realm of Next JS, I've encountered a hurdle when it comes to creating middleware within Next. My aim is to retrieve data from local storage, but I keep hitting roadblocks. middleware.ts import { key, timeEncryptKey, to ...

javascriptreactjstypescriptnext.js

excessive server memory usage in a Next.js project

We are currently working on a Next.js project which is a builder project where web pages load from JSON data and users interact through the builder and dashboard. Our user base is not large, with usually 2-15 users actively engaging in the dashboard at any ...

node.jsnext.js

Troubleshooting SCSS Issues in NextJS

Can anyone help me with debugging SCSS in NEXT.JS? I've been trying to figure it out but haven't had any luck. When I use @debug on a SCSS module, nothing shows up in the console. Do I need to configure something in the next.config.js file or is ...

cssdebuggingsassnext.js

The _app pageProps object returned from getInitialProps is only populated on the home route "/" and is empty on all other routes

I have encountered a challenge while trying to conditionally display a Next.js component based on API data fetched in getInitialProps within _app.js: MyApp.getInitialProps = async (context: AppContext): Promise<AppInitialProps> => { const respon ...

next.js

The elusive 404 error strikes again as the Nginx server frantically searches for the default path 'etc/nginx/html/index.html' within the NextJS application

I've been struggling with a persistent 404 issue for days now and could really use some assistance. My system is CentOS7 (CPanel, VPS) with engintron for the nginx reverse proxy and pm2 to run my next.js application. default.conf server { listen ...

node.jsnginxnext.jscentos7pm2

Error Message: An issue has occurred with the server. The resolver function is not working properly in conjunction with the next

https://i.stack.imgur.com/9vt70.jpg Encountering an error when trying to access my login page. Using the t3 stack with next auth and here is my [...nextauth].ts file export const authOptions: NextAuthOptions = { // Include user.id on session callbacks ...

typescriptnext.jsgoogle-oauthnext-authgetserversideprops

Middleware in Redux Toolkit is ineffective in managing successful asynchronous actions

After integrating my own middleware into the Redux-Toolkit store using configureStore in my Next.js app, I noticed that the middleware functions appear to be greyed out. I added them via: getDefaultMiddleware({ thunk: { extraArgument: updateNavTabMid ...

typescriptnext.jsreduxredux-toolkitredux-thunk

Having trouble with Cloudflare and Next.js static exports not functioning properly?

I was working fine, but suddenly it stopped functioning and I'm unsure of the reason. Any help would be appreciated! Error Logs: 2022-11-24T13:14:56.98176Z Executing user command: next build && next export 2022-11-24T13:14:57.075259Z /opt/bu ...

next.jscloudflarecloudflare-pages

Toggle the presence of a string in an array with a checkbox

Currently, I am working on a user creation form for my Next.js front end project using TypeScript. The main goal is to allow an administrator to create new users by filling out a simple form which will generate a basic user object. Here is the structure of ...

reactjstypescriptnext.jschakra-ui

What is the best method for saving a JSON resource on my device?

When I make a JSON request, it provides me with various parameters, one of which is the name. I want to create a variable to cache this name parameter so that I can access it later in my app. For instance, if the name from JSON request is "david", I would ...

iosjsoncaching

The function adapterArgs.rawResponse.getHeaders is not valid

Trying to establish a connection between next13 route.ts and the Shopify Node API using the code below: export async function GET(request: Request, res: Response) { const { searchParams } = new URL(request.url); const shop = searchParams.get('shop ...

next.jsshopify-api-node

Encountering an issue where the sharp module fails to build during yarn install

After updating both Node and Yarn, I encountered an issue while trying to run yarn install on my NextJS project. The error message that showed up is as follows: ... ➤ YN0007: │ sharp@npm:0.29.3 must be built because it never has been before or the last ...

node.jsnext.jssharpyarn-v2

Getting started with the NextJs API can be easy with the right approach

I recently started using Next.js with MongoDB and I'm wondering about the best way to structure my API route files. My application performs basic operations like adding, updating, and deleting documents in a MongoDB collection. Currently, I have sepa ...

node.jsreactjsnext.js

Error encountered while attempting to call `prisma.job.findMany()`: Database path issue occurred when trying to connect to my SQL Lite database on Vercel

Whenever I attempt to access a page that loads data on my next.js application, I encounter a 504 internal server error. The error message reads: Error retrieving users: PrismaClientInitializationError: Invalid `prisma.job.findMany()` invocation: Error qu ...

sqlitenext.jsprismavercel

Assistance with the Chakra UI Range Slider in React

I could use some help figuring out where exactly to implement my OnChange and Map functions for mapping JSON data into a Range Slider. Everything seems to be rendering correctly, but I keep encountering an error when I try to move the slider: Unhandled Ru ...

javascriptreactjsnext.jsrangeslider

No display of Tailwind updates on local server in Safari browser using NextJS and a Mac M1

For my personal project with NextJS, I am using Tailwind CSS, but I am experiencing frequent issues with updating styles. It seems like there is a 50/50 chance that Tailwind will apply the styles to the component properly, and sometimes I have to go throug ...

cssreactjsnext.jstailwind-css

Incorporating a Favicon into your NextJs App routing system

Encountering an issue with the new Next.js App Router. The head.js files have been removed, thus according to the documentation I need to implement metadata in layout.ts. My favicon file is named favicon.png. How should I specify it within the following c ...

javascriptreactjsnext.jsnext.js13

Utilizing Cookies in an AJAX Request for Cross-Domain Communication with Pure Javascript

I am in the process of developing an Analytics application and I'm seeking a method to uniquely identify each user's device. Currently, my approach involves generating a "cookie" from the server side to track all page clicks and interactions thro ...

javascriptajaxjsoncross-domaincors