When you call an API from React running on localhost:3000, the browser blocks the request if the API doesn't allow cross-origin requests. This is CORS (Cross-Origin Resource Sharing) protection.

**Error Message:**
```
Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
```

## Understanding the Problem

The browser checks if the API server explicitly allows requests from your origin (localhost:3000). If the API doesn't send the right headers, the browser blocks the response.

## Solution 1: Development Proxy (Quick Fix)

Add this to your package.json:

```json
{
  "proxy": "https://api.example.com"
}
```

Change your fetch calls:

```javascript
// Before
fetch('https://api.example.com/users')

// After
fetch('/users')
```

The React dev server forwards requests to the API. CORS error disappears.

## Solution 2: Backend Configuration (Production Fix)

If you control the backend, add CORS headers. For Express.js:

```javascript
const cors = require('cors');

app.use(cors({
  origin: 'http://localhost:3000',  // development
  // origin: 'https://yourapp.com', // production
  credentials: true
}));
```

## Solution 3: Backend Proxy (Best Practice)

Create an endpoint in your backend that calls the external API:

```javascript
// Node.js backend
app.get('/api/weather', async (req, res) => {
  const response = await fetch('https://external-api.com/data');
  const data = await response.json();
  res.json(data);
});
```

Your React app calls your backend:

```javascript
fetch('http://localhost:5000/api/weather')
```

Backend-to-backend calls don't have CORS restrictions.

## Common Mistakes

### Using mode: 'no-cors'

```javascript
fetch(url, { mode: 'no-cors' })  // Don't do this
```

This sends the request but you can't read the response. The response becomes "opaque" - completely useless.

### CORS Browser Extensions

Chrome extensions like "CORS Unblock" only work in development. They don't solve production issues.

## Which Solution to Use

| Scenario | Solution |
|----------|----------|
| Development | Use proxy in package.json |
| You own the API | Configure CORS on backend |
| Third-party API | Create backend proxy |
| Production | Backend proxy or proper CORS config |

## Key Points

CORS is a security feature, not a bug. The proper fix depends on whether you control the API server. For third-party APIs, always route through your backend.

Getting 'No Access-Control-Allow-Origin header is present'? Here's how I fixed this CORS error in my React app.

Fix CORS Error in React - No Access-Control-Allow-Origin Header

Hydration errors occur when server-rendered HTML doesn't match what React renders on the client. This happens in Next.js and other SSR frameworks.

**Error Message:**
```
Warning: Text content did not match. 
Server: "December 19" Client: "December 20"

Hydration failed because the initial UI does not match 
what was rendered on the server
```

## Root Cause

The server renders your component at one time. The client hydrates at a different time. If they produce different output, React throws a hydration error.

## Common Causes

### 1. Date and Time Rendering
```javascript
function Component() {
  return <div>{new Date().toString()}</div>  // Different every render
}
```

### 2. Random Values
```javascript
function Component() {
  return <div>{Math.random()}</div>  // Different every time
}
```

### 3. Browser-Only APIs
```javascript
function Component() {
  return <div>{window.innerWidth}</div>  // window doesn't exist on server
}
```

### 4. localStorage Access
```javascript
function Component() {
  const theme = localStorage.getItem('theme');
  return <div className={theme}>...</div>  // localStorage is client-only
}
```

## Solution 1: useEffect for Client-Only Code

Move dynamic content to useEffect:

```javascript
function Component() {
  const [time, setTime] = useState('');
  
  useEffect(() => {
    setTime(new Date().toString());
  }, []);
  
  return <div>{time}</div>;
}
```

Server renders empty string. Client renders empty string, then updates. No mismatch.

## Solution 2: Check Window Existence

```javascript
function Component() {
  const width = typeof window !== 'undefined' ? window.innerWidth : 1200;
  return <div>Width: {width}</div>;
}
```

Both server and client render the same initial value.

## Solution 3: Suppress Hydration Warning

For intentional mismatches like timestamps:

```javascript
<div suppressHydrationWarning>
  {new Date().toString()}
</div>
```

Use sparingly. Only when you know the mismatch is acceptable.

## Solution 4: Dynamic Import (Next.js)

Disable SSR for specific components:

```javascript
import dynamic from 'next/dynamic';

const ClientComponent = dynamic(
  () => import('./ClientOnly'),
  { ssr: false }
);

function Page() {
  return <ClientComponent />;
}
```

Component only renders on client.

## Practical Example

**Problem:** Showing "Last updated X minutes ago"

```javascript
// This breaks
function UpdateTime({ timestamp }) {
  return <span>{getTimeSince(timestamp)}</span>;
}
```

Server calculates "2 minutes ago". User visits later, client calculates "62 minutes ago". Mismatch.

**Solution:**

```javascript
function UpdateTime({ timestamp }) {
  const [timeAgo, setTimeAgo] = useState('');

  useEffect(() => {
    setTimeAgo(getTimeSince(timestamp));
    
    const interval = setInterval(() => {
      setTimeAgo(getTimeSince(timestamp));
    }, 60000);

    return () => clearInterval(interval);
  }, [timestamp]);

  return <span>{timeAgo}</span>;
}
```

## Debugging Tips

1. Check browser console for the exact mismatch
2. Look for Date, Math.random, or window usage
3. Search for localStorage or sessionStorage
4. Verify all server/client code paths are identical

## Prevention Checklist

- Use useEffect for time-dependent values
- Check `typeof window !== 'undefined'` before using browser APIs
- Load localStorage values in useEffect
- Use suppressHydrationWarning only when necessary
- Consider dynamic imports for client-only components

## Key Takeaway

If a value changes between server and client render, move it to useEffect or use proper guards. Hydration errors indicate a real problem in SSR logic.

Getting hydration errors in Next.js or React? Here's why it happens and how to fix it without breaking your app.

React Hydration Error: Text Content Does Not Match

Master React development with hooks, state management, and modern patterns.

React Articles & Blog

All React Articles

Fix CORS Error in React - No Access-Control-Allow-Origin Header

React Hydration Error: Text Content Does Not Match