Vite.js + React: Asset Loading & CORS Issues in Vercel Dev

Help
,
1

Hello.

I am currently facing an issue while trying to deploy my Vite.js + React app locally using vercel dev. The app works fine with npm run dev for local development, but when using vercel dev, I encounter problems with fetching data from a JSON file and loading static assets.

Issue Description

Previously, I used json-server locally (npm run server) to serve data from data/cities.json. However, since Vercel doesn’t support running scripts like npm run server, my API calls are failing in production.

I attempted to set up an API route in api/cities.js using fs.readFileSync to fetch data from data/cities.json, but I keep getting 404 errors.

Additionally, the browser console shows these errors:

Access to script at ‘file:///D:/assets/index-15aab821.js’ from origin ‘null’ has been blocked by CORS policy:
Cross-origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

Failed to load resource: net::ERR_FILE_NOT_FOUND

This suggests that:

  1. Assets are not being served correctly, as they are being loaded from a file:/// URL instead of the Vercel development server.
  2. The CORS policy is blocking certain requests, preventing scripts and styles from loading properly.

Setup Details

  • Framework: Vite.js and React
  • Entry Point: main.jsx (React entry file)
  • Vercel Dev Setup:
    • Using Vercel CLI (vercel dev) to simulate a production environment locally.
    • Project includes static assets like images and CSS that should be served from the public/ directory.

What I Have Tried

  1. Ensured that the static assets (JS, CSS, images) are placed in the public/ directory.
  2. Checked my vite.config.js file and confirmed that the base path is set to /.
  3. Verified in the browser’s developer tools that errors are related to blocked requests due to CORS policy and missing assets.
  4. Tried moving assets into different directories (assets/, images/) but the issue persists.

My Current Configuration

My current vercel.json file:

{
  "version": 2,
  "rewrites": [{ "source": "/api/(.*)", "destination": "/api/$1" }]
}

My current cities.js file inside api folder in the root:

import fs from "fs";
import path from "path";

export default function handler(req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  res.setHeader("Access-Control-Allow-Credentials", "true");

  if (req.method === "OPTIONS") {
    return res.status(200).end();
  }

  const filePath = path.join(process.cwd(), "data", "cities.json");
  try {
    const data = fs.readFileSync(filePath, "utf8");
    const cities = JSON.parse(data);

    if (req.method === "GET") {
      res.status(200).json(cities);
    } else if (req.method === "POST") {
      let body = "";
      req.on("data", (chunk) => {
        body += chunk.toString();
      });
      req.on("end", () => {
        const newCity = JSON.parse(body);
        cities.push(newCity);

        fs.writeFileSync(filePath, JSON.stringify(cities, null, 2));
        res
          .status(201)
          .json({ message: "City added successfully", city: newCity });
      });
    } else {
      res.status(405).json({ error: "Method not allowed" });
    }
  } catch (error) {
    console.error("Error reading cities.json:", error);
    res.status(500).json({ error: "Failed to load cities data" });
  }
}

export const config = {
  api: {
    bodyParser: false,
  },
};

Questions & Help Needed

  1. How can I properly serve data/cities.json as an API endpoint in Vercel?
  2. Should I restructure my API setup to work with Vercel’s serverless functions instead of using fs.readFileSync?
  3. How can I ensure that static assets (JS, CSS, images) load correctly in vercel dev?
  4. Is there a recommended approach for fetching static JSON data in both development (npm run dev) and production (vercel dev)?

Additional Notes

  • The app works perfectly with npm run dev.
  • The issues only occur when running vercel dev.

I would really appreciate any insights or suggestions on resolving this issue. Thank you in advance for your help!

2

Hi, @matint-sa! Welcome to the Vercel Community :wave:

Thank you for your patience :pray:

I recommend checking out the following Community resources:

In particular the CORS post which seems to be the main issue here.

Let us know how you get on!