API call works in Postman but fails in AngularJS app

When an API call works in Postman but fails in an AngularJS app, the problem usually isn’t with the API itself—but with how the request is made from the browser. This is a very common issue, especially involving CORS policies, headers, content types, or authentication tokens.

Let’s break it down step-by-step and help you fix it completely.

---

1. Understand the Key Differences: Postman vs AngularJS

Factor	Postman	AngularJS in Browser
CORS Policy	Not enforced	Enforced strictly by browser
Authentication	Easy to manage manually	Must be programmatically added
Content-Type	Auto-handled	Must be explicitly declared in AngularJS
Cookies/Headers	Fully controllable	Limited by browser security rules
Proxy	None	Browser origin restrictions apply

---

2. Common Reasons Why the API Call Fails in AngularJS

A. CORS (Cross-Origin Resource Sharing)

Most common reason.

What happens:

• Your browser blocks the request before it even reaches the server.
• Console error:
  Access to XMLHttpRequest at 'https://api.example.com/data' from origin 'http://localhost:4200' has been blocked by CORS policy...

Fix:

1. On Server Side: Make sure the server includes these headers:
   Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Headers: Content-Type, Authorization
2. On Angular Side: Nothing can fix CORS entirely from Angular side. It must be fixed on the server or use a proxy during development.

---

B. Missing or Incorrect Headers

• Postman may auto-add Content-Type: application/json or Auth tokens.
• AngularJS does not, unless you add them.

Fix:

$http.post('https://api.example.com/data', { key: 'value' }, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here'
  }
});

---

C. Wrong Data Format

Postman sends raw JSON. AngularJS might send form-encoded data unless specified.

Fix:

Make sure you are sending a JavaScript object and not a string. Avoid manually using JSON.stringify.

$http.post('https://api.example.com/data', {
  name: 'John',
  age: 30
}, {
  headers: {
    'Content-Type': 'application/json'
  }
});

---

D. Preflight OPTIONS Request Failing

If you’re using custom headers (like Authorization), the browser first sends an OPTIONS request (preflight).

If your server does not respond to OPTIONS with correct headers, your POST/PUT/GET won’t even happen.

Server must respond to OPTIONS with:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

---

E. Wrong API URL / Base Path

Postman allows absolute paths. In AngularJS, you might have:

• Missing slash
• Wrong environment variable
• CORS blocking subdomain

Fix:

Always use full absolute path:

$http.get('https://api.example.com/data');

---

F. HTTPS vs HTTP Conflict

• Postman uses HTTPS
• AngularJS on localhost uses HTTP

If the API enforces HTTPS only, and your browser makes HTTP calls, the request will fail.

---

G. Using HTTP Interceptor Wrongly

If you are modifying headers in an AngularJS $http interceptor, make sure it’s not removing or misconfiguring headers like Authorization.

---

3. Debug Step-by-Step

Step 1: Open DevTools (Chrome → F12 → Network Tab)

• Look for your API request.
• Check Request Headers, Response Headers, and Console Errors.
• If the request is not showing up → likely blocked by CORS.

Step 2: Compare With Postman

• Copy all headers and body from Postman.
• Ensure your AngularJS call sends exactly the same headers and data format.

Step 3: Test the API with curl

This will help you simulate what the browser is doing:

curl -X POST https://api.example.com/data \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer your_token_here" \
  -d '{"name":"John","age":30}'

---

4. Workaround for CORS (Dev Mode Only)

You can use a proxy in your development setup.

Example: Using a proxy in Node.js or Nginx

// Using Express middleware
app.use('/api', function(req, res) {
  const url = 'https://api.example.com' + req.url;
  req.pipe(request({ url, headers: req.headers })).pipe(res);
});

Or setup proxy.conf.json for Angular CLI (if you’re using Angular CLI 1.x+)

---

5. Full AngularJS Sample That Matches Postman

app.controller('MyController', function($scope, $http) {
  const data = {
    name: 'John Doe',
    age: 32
  };

  const config = {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer your_token_here'
    }
  };

  $http.post('https://api.example.com/data', data, config)
    .then(function(response) {
      console.log('Success:', response.data);
    })
    .catch(function(error) {
      console.error('Error:', error);
    });
});