Understanding CORS and Browser API Requests

🤯 My API worked perfectly in Postman… …but failed in the browser. Same endpoint. Same request. Still… ❌ CORS error. At first, I thought: 👉 “Backend is broken?” 👉 “Frontend bug?” ❌ Neither. 💡 The real culprit: CORS (Cross-Origin Resource Sharing) Here’s what’s actually happening: Your browser checks: 👉 “This request is coming from a different origin… should I allow it?” If your server doesn’t explicitly say yes 👇 👉 The browser blocks it. ❌ ⚠️ Why Postman works: Postman doesn’t enforce CORS. Browsers do. 💥 That’s why you get: ✔️ API → working ❌ Browser → failing 💡 The fix is simple (once you know it): ✔️ Allow the origin in your backend ✔️ Add the right headers Example: 👉 Access-Control-Allow-Origin 🔥 After fixing: ✔️ Browser requests worked ✔️ No more head-scratching ✔️ Everything behaved as expected 🧠 Real lesson: If it works in Postman… …but fails in the browser… 👉 It’s probably CORS 😅 💬 Ever lost hours debugging this? #frontend #backend #cors #webdevelopment #javascript #reactjs #api #softwareengineering #developers #programming #tech

Interviewer: Your frontend is on localhost:3000 and backend is on localhost:8000. You open the browser console and see this: ❌ Access to XMLHttpRequest blocked by CORS policy What is this error and how do you fix it? What’s actually going on: Your browser is the bodyguard. 🛡️ It sees your frontend (port 3000) trying to talk to your backend (port 8000) and says “these are two different origins, I’m not allowing this without permission.” That’s CORS. Cross-Origin Resource Sharing. The browser isn’t being dramatic. It’s protecting your users. 3 ways to fix it: 1️⃣ Proxy — quickest fix for development Add to vite.config.js: server: { proxy: { '/api': 'http://localhost:8000' }} Browser now thinks everything is one origin. CORS never triggers. 2️⃣ Backend CORS middleware — the proper fix app.use(cors({ origin: 'http://localhost:3000' })) Your backend now gives written permission. Guard is happy. ✅ 3️⃣ Manual headers — when you need full control res.header('Access-Control-Allow-Origin', 'http://localhost:3000') res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE') The rules you must never break: ✅ Development → use proxy ✅ Production → whitelist specific origins only ❌ Never use origin: '*' in production — you’re leaving the bank vault open ❌ Never use a Chrome CORS extension as a “fix” — you’re just blindfolding the guard One line to remember forever: CORS is the browser asking for permission. Your backend grants it. Your proxy fakes it. Every senior developer has a CORS horror story. What was yours? 👇 #ReactJS #JavaScript #Frontend #WebDevelopment #CORS #DeveloperLife #InterviewPrep

“We just added login…” - and a week later we refactored half of the frontend. Ran into a very familiar situation recently. Backend “slightly” changed: now a user is not just a token, but also a context — company, branch, role, permissions. Sounds reasonable. In reality, your frontend starts behaving like a teenager: random 403s “no permissions” here “context not selected” there and sometimes… it works (no idea why) We had two options: 👉 patch it with if-statements 👉 hardcode a few checks 👉 “we’ll fix it later” And end up with: a fragile mess no one wants to touch Instead, we did something boring but right: enabled cookie sessions (withCredentials) introduced a proper flow after login (login → context → work) moved permissions to context (not login) normalized API responses implemented real logout (not just “delete token and pray”) Here’s the funny part: 👉 nothing changed visually 👉 users didn’t notice anything But under the hood: one user can belong to multiple companies roles differ per branch backend actually enforces access frontend stops guessing and starts following rules Big takeaway: the most important changes are the ones users never see And yeah, the classic: “Let’s just ship the feature, we’ll fix it later” No 🙂 Sometimes you need to lay the rails first, otherwise the train will move… just not where you expect. P.S. If your frontend starts acting weird after “small backend changes” - it’s probably not a bug. It’s architecture reminding you it exists 🙂 https://hahazen.com/ #frontend #webdevelopment #softwareengineering #javascript #reactjs #nextjs #api #backend #fullstack #webdev #architecture #systemdesign #rbac #authentication #authorization #cookies #session #apiintegration

React recap: 𝗨𝘀𝗶𝗻𝗴 𝗶𝗻𝗱𝗲𝘅 𝗮𝘀 𝗮 𝘂𝗻𝗶𝗾𝘂𝗲 𝗜𝗗 𝘄𝗮𝘀 𝗺𝘆 𝗯𝗶𝗴𝗴𝗲𝘀𝘁 𝗺𝗶𝘀𝘁𝗮𝗸𝗲 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁. At first, it felt harmless. items.map((item, index) => ( <Component key={index} /> )) Everything worked… until it didn’t. Here’s what I learned the hard way: • When the list changes (add/remove/reorder), React gets confused • Components don’t re-render correctly • State sticks to the wrong items (this one is scary) • Bugs appear that make zero sense at first I spent hours debugging something that wasn’t even obvious. The real problem? Index is not a stable identity. So what should we do instead? ✔️ Use a unique ID from your data (database ID, UUID, etc.) ✔️ Generate stable IDs (not on every render) ✔️ Think of keys as identity, not position Bad: key={index} Good: key={item.id} Simple change. Massive difference. One small mistake can quietly break your entire UI logic. If you're using index as key — fix it before it fixes you. #React #Frontend #WebDevelopment #JavaScript #CodingLessons

you upgraded to React 20. suddenly your code breaks. defaultProps is gone. string refs throw errors. you're migrating code from 2018. welcome to the cleanup. why it breaks: React 20 removes patterns deprecated since React 16. defaultProps on function components, string refs (ref="myRef"), legacy context API — all gone. if your code still uses these, React 20 errors immediately. run npx @react-codemod/cli react-20 to auto-migrate. #reactjs #typescript #webdevelopment #buildinpublic #react20

most developers don't know about the optional chaining operator gotcha. they use it everywhere. it silently hides bugs. the problem: optional chaining (?.) returns undefined if property doesn't exist. you think it's safe. bugs slip through. why it breaks: when you use optional chaining, you're not validating — you're hiding. undefined gets passed around. downstream code breaks. you spend 2 hours debugging something that should have failed immediately. the real issue: optional chaining makes bad data look safe. it lets undefined flow through your app like it's normal. the solution: validate early. fail loud. don't let undefined silently propagate. when to use optional chaining: - reading optional properties - not for safety - for convenience only when NOT to use it: - critical data paths - anything you depend on - anything that should always exist one rule: optional chaining is a convenience. validation is safety. use both. #reactjs #typescript #webdevelopment #buildinpublic #javascript

𝐈𝐬 𝐲𝐨𝐮𝐫 `useEffect` 𝐡𝐨𝐨𝐤 𝐫𝐮𝐧𝐧𝐢𝐧𝐠 𝐭𝐨𝐨 𝐨𝐟𝐭𝐞𝐧, 𝐨𝐫 𝐧𝐨𝐭 𝐞𝐧𝐨𝐮𝐠𝐡? 𝐘𝐨𝐮'𝐫𝐞 𝐧𝐨𝐭 𝐚𝐥𝐨𝐧𝐞. I’ve seen countless `useEffect` bugs boil down to one thing: incorrect dependency arrays. It’s deceptively simple, but a missing dependency can lead to stale closures and unexpected behavior, while an unnecessary one can trigger re-renders like crazy. Consider this: if you define a function or object inside your component and use it in `useEffect`, it must be in your dependency array. However, if that function itself isn't memoized with `useCallback` (or the object with `useMemo`), it becomes a new reference on every render, causing your `useEffect` to fire relentlessly. The Fix: 1. Be explicit: List all values from your component scope that `useEffect` uses. ESLint usually flags this for a reason. 2. Memoize functions/objects: If a function or object needs to be a dependency but shouldn't trigger re-runs unless its own dependencies change, wrap it in `useCallback` or `useMemo`. ```javascript // Problem: myApiCall changes every render if not memoized const MyComponent = ({ id }) => { const myApiCall = () => fetch(`/data/${id}`); useEffect(() => { myApiCall(); // myApiCall is a new function on every render }, [myApiCall]); // Infinite loop! } // Solution: const MyComponent = ({ id }) => { const myApiCall = useCallback(() => fetch(`/data/${id}`), [id]); useEffect(() => { myApiCall(); }, [myApiCall]); // Now, myApiCall only changes when 'id' changes } ``` It's a subtle but critical distinction that keeps your React apps performant and predictable. What's the trickiest `useEffect` bug you've ever had to squash? #React #JavaScript #FrontendDevelopment #WebDev #Performance

𝐈𝐬 𝐲𝐨𝐮𝐫 `𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭` 𝐫𝐮𝐧𝐧𝐢𝐧𝐠 𝐰𝐡𝐞𝐧 𝐢𝐭 𝐬𝐡𝐨𝐮𝐥𝐝𝐧'𝐭? 𝐓𝐡𝐞 𝐜𝐮𝐥𝐩𝐫𝐢𝐭 𝐦𝐢𝐠𝐡𝐭 𝐛𝐞 𝐦𝐨𝐫𝐞 𝐬𝐮𝐛𝐭𝐥𝐞 𝐭𝐡𝐚𝐧 𝐲𝐨𝐮 𝐭𝐡𝐢𝐧𝐤. I just spent a frustrating hour debugging a seemingly random data refetch in a React component, only to trace it back to a non-primitive dependency in my `useEffect` array. When you pass an object or a function created inside your component directly into `useEffect`'s dependency array, React performs a reference equality check. Even if the contents of your object or the logic of your function haven't changed, its reference is new on every render. This forces your effect to re-run unnecessarily. Here's the common trap: ```javascript // 🚨 Problematic: 'config' object reference changes on every render const MyComponent = ({ id }) => { const config = { userId: id, status: 'active' }; useEffect(() => { fetchData(config); }, [config]); // 💥 Effect re-runs even if 'id' hasn't changed // ... }; ``` A cleaner, more performant way is to stabilize those references. For configuration objects, `useMemo` is your friend: ```javascript // ✅ Solution: 'memoizedConfig' reference is stable as long as 'id' is const MyComponent = ({ id }) => { const memoizedConfig = useMemo(() => ({ userId: id, status: 'active' }), [id]); useEffect(() => { fetchData(memoizedConfig); }, [memoizedConfig]); // ... }; ``` This prevents wasted renders and unnecessary side effects, keeping your app snappier and less buggy. It's often the small details in `useEffect` that lead to the biggest headaches! Have you ever battled a similar `useEffect` dependency bug? What was your fix? #ReactJS #FrontendDevelopment #JavaScript #WebDev #ReactHooks

🚀 React 19 introduces use() — and it’s a game changer Fetching data in React used to mean: state, effects, loading flags, error handling… 😵💫 Now? 👉 Just call use() and get the value directly. No extra state. No manual loading logic. No boilerplate. 💡 What changed? • Read promises directly in components • Automatic Suspense handling • Errors bubble to boundaries • Cleaner, more readable code This isn’t just a new API — it’s a shift in how we think about data fetching in React. Less code. Fewer bugs. Better DX. 👉 Would you adopt use() in your projects, or stick with the current approach? #React #React19 #JavaScript #Frontend #WebDevelopment #CleanCode #DeveloperExperience

My search API was getting called 15+ times… for a single input 😅 Yes, seriously. Every time a user typed something, API was triggered on every keystroke. 💡 Example: User types: "react" 👉 r → API call 👉 re → API call 👉 rea → API call 👉 reac → API call 👉 react → API call ⚠️ This caused: • Too many unnecessary API calls • Slower performance • Bad user experience 💡 Then I fixed it using Debouncing Instead of calling API immediately, 👉 I waited for the user to stop typing 🧠 What I changed: Added a small delay (300–500ms) If user keeps typing → cancel previous call If user stops → then call API ✅ Result: • Reduced API calls significantly • Better performance • Smooth search experience 🔥 What I learned: Not every user action needs an instant API call. #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment