WebGlow Knowledge Centre

Fetch or AJAX requests not working can break dynamic web pages. Here’s a developer-focused guide to 12 fixes.

Common issues include CORS errors, wrong URLs, async/await mishandling, server-side responses, and JSON parsing problems. Each step below includes working examples and fixes you can copy.

1️⃣ Incorrect URL or Path

Check that the URL matches the API endpoint exactly:

// ❌ Wrong path
fetch('/api/dataa')
  .then(res => res.json())
  .then(data => console.log(data));
        

Fix:

fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));
        

2️⃣ CORS Issues

Cross-Origin Resource Sharing prevents requests to other domains without proper headers.

Access to fetch at 'https://api.example.com/data' 
from origin 'http://localhost' has been blocked by CORS
        

Fix: Configure the server to allow CORS:

// Example: Express.js server
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});
        

3️⃣ Missing Async/Await Handling

Improper handling of async fetch can cause undefined data:

// ❌ won't wait for response
let data = fetch('/api/data').json();
console.log(data);
        

Fix:

async function getData() {
  const res = await fetch('/api/data');
  const data = await res.json();
  console.log(data);
}
getData();
        

4️⃣ Handling Non-JSON Responses

// ❌ Assuming JSON always
fetch('/api/text')
  .then(res => res.json()) // may throw error
        

Fix:

fetch('/api/text')
  .then(res => res.text())
  .then(text => console.log(text));
        

5️⃣ Incorrect HTTP Method

Ensure your fetch uses the correct method (GET, POST, PUT, DELETE) matching the server expectation.

6️⃣ Missing Headers

fetch('/api/data', {
  method: 'POST'
})
        

Fix: Add Content-Type and other headers:

fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' })
})
        

7️⃣ Network Errors

Always include error handling to catch network issues:

fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Network error', err));
        

8️⃣ Wrong JSON Parsing

Fix incorrect parsing for nested JSON structures.

9️⃣ Not Awaiting Promises

Always handle fetch and response as promises or using async/await to prevent undefined values.

10 Using XMLHttpRequest Incorrectly

Older AJAX methods like XMLHttpRequest require correct readyState and status handling.

11 Forgetting JSON.stringify in POST

// ❌ sending object directly
body: { name: 'John' }
        

Fix:

body: JSON.stringify({ name: 'John' })
        

12 Testing in Different Browsers

Some fetch behaviors differ in older browsers; use polyfills if needed.

Full Working Example

HTML

JS (script.js)

document.getElementById('btn').addEventListener('click', async () => {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error('Fetch failed', err);
  }
});
        

Extra Tips

• Use DevTools → Network tab to inspect requests.
• Check CORS headers on API server.
• Always handle errors with .catch() or try/catch.
• Test with Postman or curl before using fetch in the browser.

Download Free Templates

Download Free HTML Templates to practice fetch requests and API calls.