How to Fix CORS Error in React: Simple Solutions

A CORS error in React happens when your app tries to access a resource from a different domain without proper permission. To fix it, configure the server to allow your React app's origin or use a proxy in development with create-react-app to forward requests safely.

Why This Happens

CORS (Cross-Origin Resource Sharing) errors occur because browsers block web pages from making requests to a different domain than the one that served the web page. This is a security feature to prevent malicious sites from accessing sensitive data.

In React apps, when you try to fetch data from an API on another domain without the server allowing your app's domain, the browser stops the request and shows a CORS error.

javascript

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Output

Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The Fix

To fix CORS errors, you need to allow your React app's domain on the server by adding the Access-Control-Allow-Origin header. If you don't control the server, use a proxy during development to forward requests.

For example, with create-react-app, add a proxy field in package.json to forward API calls to the backend server.

json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://api.example.com"
}

Output

Now, fetch('/data') will be forwarded to http://api.example.com/data without CORS errors.

Prevention

To avoid CORS errors in the future, always ensure your backend server sets the correct CORS headers to allow your frontend domain. Use environment variables to manage API URLs and proxies for different environments.

Also, test API calls early in development and use tools like browser DevTools to check network requests and headers.

Related Errors

Other errors similar to CORS include:

• Network errors: caused by wrong URLs or server downtime.
• Authentication errors: when API keys or tokens are missing or invalid.
• Mixed content errors: when HTTPS pages try to load HTTP resources.

Fix these by checking URLs, credentials, and using HTTPS consistently.

Key Takeaways

CORS errors happen because browsers block cross-domain requests without permission.

Fix CORS by enabling the server to allow your React app's origin or using a proxy in development.

Add a proxy field in create-react-app's package.json to forward API requests safely.

Always configure backend CORS headers correctly to prevent errors in production.

Use browser DevTools to inspect network requests and debug CORS issues early.