Fixing CORS Error in Development & Production with TypeScript, Express.js, Next.js, and React.js

CORS (Cross-Origin Resource Sharing) error is a common issue that occurs when a web application tries to make a request to a different domain than the one it is hosted on. This issue can be particularly frustrating for developers, as it prevents the application from functioning properly and can lead to errors and unexpected behavior.

In this tutorial, we will walk through how to fix CORS error in development and production environments using TypeScript, Express.js, Next.js, and React.js. We will cover both the server-side and client-side solutions to ensure that your application runs smoothly without any CORS issues.

Steps to Fix CORS Error in Development & Production

Server-Side Fix (Express.js)

1. Install cors package:

   npm install cors

2. Import and use cors in your Express.js server file (server.ts):

   import cors from 'cors';
   
   const app = express();
   app.use(cors());

3. Configure CORS options if needed:

   app.use(cors({
      origin: 'http://localhost:3000', // Allow requests from this origin
      credentials: true, // Allow sending cookies
      methods: 'GET,POST,PUT,DELETE', // Allow these HTTP methods
   }));

4. Handle CORS preflight requests (OPTIONS requests) by adding a preflight route:

   app.options('*', cors());

5. Test your server by making cross-origin requests from your client application.

Client-Side Fix (React.js / Next.js)

1. Install axios package for making HTTP requests:

   npm install axios

2. Create a custom axios instance with CORS configuration in your API file (api.ts):

   import axios from 'axios';
   
   const api = axios.create({
      baseURL: 'http://localhost:4000', // Server URL
      withCredentials: true, // Send cookies with requests
   });

3. Use the custom axios instance to make requests in your React/Next component:

   const fetchData = async () => {
      try {
          const response = await api.get('/data');
          console.log(response.data);
      } catch (error) {
          console.error(error);
      }
   }

4. Verify that your requests are being made successfully without any CORS errors.

Production Deployment

1. Set up proper CORS configuration in your production server to allow requests from your domain.

2. Use environment variables to define CORS options based on your deployment environment.

3. Ensure that the CORS configuration is securely implemented to prevent unauthorized access to your server resources.

By following these steps, you should be able to fix CORS error in both development and production environments for your TypeScript, Express.js, Next.js, and React.js applications. Remember to test your application thoroughly to ensure that CORS issues are resolved and your application functions as expected across all environments.