如何用Angular5以x-www-form-urlencoded方式调用REST API并获取Token

Hey there, let's work through this issue step by step—since you've got the request working perfectly in Postman but not in Angular 5, the problem almost always boils down to a small mismatch in how the request is structured between the two tools.

1. Fix Request Body Format Mismatch #

Postman lets you send data as x-www-form-urlencoded or form-data with just a few clicks, but Angular's HttpClient defaults to sending JSON payloads. If your backend expects form-encoded data (which is common for auth endpoints), you'll need to adjust your Angular code:

Example for Form-Encoded Data: #

import { HttpClient, HttpHeaders } from '@angular/common/http';

// Inside your component/service
const authHeaders = new HttpHeaders({
  'Content-Type': 'application/x-www-form-urlencoded'
});

const authBody = new URLSearchParams();
authBody.set('username', 'moi');
authBody.set('paswd', 'root');

this.http.post('/your-auth-endpoint', authBody.toString(), { headers: authHeaders })
  .subscribe(
    (response) => {
      console.log('Token received:', response);
      // Store the token (e.g., localStorage.setItem('authToken', response.token))
    },
    (error) => {
      console.error('Request failed:', error);
    }
  );

2. Check CORS Configuration #

Postman doesn't enforce browser CORS rules, but Angular does. Open your browser's DevTools (F12) → Network tab, then look for your auth request. If you see a CORS-related error, your backend needs to be configured to allow requests from your Angular app's origin (e.g., adding Access-Control-Allow-Origin headers).

3. Mirror Postman's Headers #

Sometimes Postman adds default headers (like User-Agent) that your backend expects. Try copying those headers from Postman into your Angular request:

const authHeaders = new HttpHeaders({
  'Content-Type': 'application/x-www-form-urlencoded',
  'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
});

4. Inspect Network Requests in DevTools #

Dig into the details of your Angular request to spot differences from Postman:

• Check the Request Payload tab to confirm your username and paswd are being sent correctly.
• Look at the Response tab—even if Angular doesn't show an error, the backend might be returning a 4xx/5xx status with a helpful message.
• Verify the Status Code: 4xx means client-side issues (bad request, missing params), 5xx means server-side problems.

5. Confirm HttpClientModule is Imported #

Double-check that you've added HttpClientModule to your AppModule (not just importing HttpClient in your component):

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // Other modules...
    HttpClientModule
  ]
})
export class AppModule { }

If none of these steps fix it, share the exact error message from your browser console or the network tab details—that'll help narrow things down even further!

内容的提问来源于stack exchange，提问作者Pierre Colart