ReactJS: After Adding the Chrome CORS Plugin, Unhandled Rejection (TypeError) Failed to Fetch

Handling API Errors in React: CORS Plugin Challenges

When working with APIs in ReactJS, developers often encounter various challenges related to data fetching, especially when dealing with third-party APIs. One common issue that arises is the "Unhandled Rejection (TypeError): Failed to fetch" error. This error can occur even when using popular APIs like Swiggy’s restaurant list API, which many developers use to enhance their web applications.

In this case, adding a CORS Chrome extension might seem like a viable solution to bypass restrictive browser policies. However, it may introduce new complications instead of resolving the issue. If you're using a CORS plugin in your development environment, and your API requests fail shortly after loading, you could be running into a problem where the plugin conflicts with the browser's request-handling behavior.

Understanding how to manage cross-origin requests and troubleshoot CORS errors in ReactJS is essential for a smooth development process. APIs like Swiggy's often have security layers, such as CORS, in place to control access from unauthorized clients. These restrictions can lead to errors that need to be addressed properly.

In this guide, we’ll explore why this error occurs, particularly after adding a CORS plugin in Chrome. We’ll also discuss strategies to resolve it while working with the Swiggy API in your React applications.

Explaining Solutions for CORS Issues in React with Swiggy API

In the first solution, we created a Node.js backend using Express to bypass the CORS issue when fetching the restaurant data from Swiggy’s API. The CORS policy prevents browsers from making requests to a different domain unless that domain permits it. By creating a simple server, we can act as a middle layer between the client and the API, fetching the data server-side and returning it to the React front-end. This method avoids CORS errors since the request comes from the same origin as the client app.

The Express backend sets up custom headers, particularly the Access-Control-Allow-Origin, which allows our client to request the resources without facing CORS restrictions. The fetch call to Swiggy's API is made server-side, and the data is returned in JSON format. This approach is often considered more secure and performant in production environments since it hides API keys or sensitive information. Furthermore, the use of try-catch ensures proper error handling, displaying user-friendly error messages if the API fails to respond.

In the second solution, we modify the fetch request on the client-side React code. This method involves adding custom headers in the fetch call, ensuring that the request is correctly formatted before reaching the API. We use React's useEffect hook to trigger the API call when the component mounts. The async function waits for the API response, converts it to JSON, and handles errors if the request fails. However, this solution still faces CORS issues if the API does not allow cross-origin requests from browsers directly.

Finally, in the third solution, we use a third-party service called CORS-Anywhere. This is a middleware service that temporarily helps bypass CORS restrictions by rerouting the API request through their server. While this solution can work in development environments, it is not recommended for production due to security risks and the dependency on external services. It also introduces performance overhead as it adds an additional layer to the data fetching process. Using this method can be convenient during testing phases but should be avoided in production for security reasons.

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const port = 5000;

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET');
  next();
});

app.get('/restaurants', async (req, res) => {
  try {
    const response = await fetch('https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798');
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: 'Failed to fetch restaurants' });
  }
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

import React, { useEffect } from 'react';

const Body = () => {
  async function getRestaurants() {
    try {
      const response = await fetch(
        'https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798',
        { headers: { 'Content-Type': 'application/json' } }
      );

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Fetch error:', error);
    }
  }

  useEffect(() => {
    getRestaurants();
  }, []);
};

export default Body;

const Body = () => {
  async function getRestaurants() {
    try {
      const response = await fetch(
        'https://cors-anywhere.herokuapp.com/https://www.swiggy.com/dapi/restaurants/list/v5?lat=23.1685786&lng=79.9338798'
      );

      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error fetching restaurants:', error);
    }
  }

  useEffect(() => {
    getRestaurants();
  }, []);
};

export default Body;

Troubleshooting CORS Issues in API Requests

One of the underlying reasons for the "Failed to fetch" error in a React application, especially when using third-party APIs like Swiggy, is CORS (Cross-Origin Resource Sharing) restrictions. CORS is a security feature that restricts web applications from making requests to a different domain than the one from which they were served. In this case, the Swiggy API rejects the request because it originates from a different domain (your React app). This is particularly problematic when you are fetching data from APIs that don’t explicitly support cross-origin requests.

A common workaround is using browser extensions like the "Allow CORS" Chrome extension. However, such extensions can lead to inconsistent results. This is because they manipulate browser-level settings that don’t always synchronize properly with API requests. These plugins should ideally be used only for development and not in production environments. For production, a safer and more reliable approach would be using a backend proxy server that requests the data on behalf of your React app, as seen in the solutions provided earlier.

Another aspect to consider is handling errors effectively. While CORS issues are a common cause of "Failed to fetch" errors, other factors like network instability, incorrect API URLs, or server downtime could also result in this error. Hence, it’s important to implement robust error handling in your code, especially when working with third-party APIs. A proper error-handling mechanism will help debug the issue more effectively and provide user-friendly messages when something goes wrong.