How to fix CORS issues in Replit

Open your deployed app in a browser and press F12 to open DevTools. Click the Console tab. CORS errors appear as red messages like: Access to XMLHttpRequest at 'https://your-api.replit.app/data' from origin 'https://your-frontend.replit.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. This error means the browser is blocking the response because the server did not include the required CORS headers. Note the two different origins in the error message: the frontend origin making the request and the backend origin receiving it.

The most common fix is adding the cors npm package to your Express server. Open the Shell and install it, then import and use it in your server code. The simplest configuration allows all origins, which works for development but should be restricted in production. For production, specify the exact origins that are allowed to call your API. The middleware automatically handles preflight OPTIONS requests that browsers send before cross-origin POST, PUT, and DELETE requests.

1const express = require('express');
2const cors = require('cors');
3
4const app = express();
5
6// Option 1: Allow all origins (development only)
7app.use(cors());
8
9// Option 2: Allow specific origins (production recommended)
10app.use(cors({
11  origin: [
12    'https://your-frontend.replit.app',
13    'https://yourdomain.com'
14  ],
15  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
16  allowedHeaders: ['Content-Type', 'Authorization'],
17  credentials: true
18}));
19
20app.get('/api/data', (req, res) => {
21  res.json({ message: 'CORS is working' });
22});
23
24app.listen(3000, '0.0.0.0');

Replit uses a service called Replshield that adds a 307 Temporary Redirect to https://replshield.replit.dev/ on first requests to deployed apps. This redirect strips your CORS headers, causing errors even when your Express CORS middleware is correctly configured. This is a known platform-level issue reported since July 2025 affecting thousands of users. The redirect typically occurs on the first request or after periods of inactivity, making it intermittent and difficult to debug. The most reliable workaround is to deploy your frontend and backend in the same Repl so all requests are same-origin, eliminating the need for CORS entirely.

The most reliable way to avoid CORS issues on Replit is to serve your frontend from the same Express server that provides your API. This makes all requests same-origin, so CORS restrictions never apply. Configure Express to serve static files from a public or dist directory and handle API routes separately. This approach works with both React builds and plain HTML/CSS/JS frontends. Build your React app into the dist folder and let Express serve it alongside your API routes.

1const express = require('express');
2const path = require('path');
3
4const app = express();
5
6// Parse JSON request bodies
7app.use(express.json());
8
9// Serve API routes first
10app.get('/api/data', (req, res) => {
11  res.json({ message: 'Hello from the API', timestamp: Date.now() });
12});
13
14app.post('/api/submit', (req, res) => {
15  const { name } = req.body;
16  res.json({ received: name });
17});
18
19// Serve static frontend files
20app.use(express.static(path.join(__dirname, 'public')));
21
22// Catch-all: serve index.html for client-side routing
23app.get('*', (req, res) => {
24  res.sendFile(path.join(__dirname, 'public', 'index.html'));
25});
26
27app.listen(3000, '0.0.0.0', () => {
28  console.log('Server running on port 3000');
29});

If you use a React development server (like Vite or Create React App) alongside an Express backend during development, the two servers run on different ports, causing CORS issues. Instead of adding CORS middleware just for development, set up a proxy in your frontend configuration. Vite supports a proxy option in vite.config.ts that forwards API requests to your backend server. This keeps all requests same-origin from the browser's perspective during development.

1// vite.config.ts
2import { defineConfig } from 'vite';
3import react from '@vitejs/plugin-react';
4
5export default defineConfig({
6  plugins: [react()],
7  server: {
8    proxy: {
9      '/api': {
10        target: 'http://localhost:3001',
11        changeOrigin: true,
12      }
13    }
14  }
15});

After implementing your fix, test in multiple scenarios: the Replit workspace preview, a direct browser visit to the deployed URL, and from an external domain if applicable. Use the Network tab in DevTools to inspect response headers and verify that Access-Control-Allow-Origin is present. Also test after the app has been idle for 15+ minutes (on Autoscale deployments) to catch the cold-start Replshield redirect issue. For persistent CORS issues in production deployments that resist standard fixes, RapidDev can diagnose platform-specific problems and recommend architectural solutions.