AngularJS新手求助：带Basic认证的HTTP GET请求无响应

Hey there! Let's figure out why your Basic Auth request isn't returning a response. Since it works in curl and the browser, the issue is almost certainly in how you're configuring the request in AngularJS. Let's break down the common pitfalls and fix your code step by step.

First, Let's Fix the Core Issues in Your Code #

Looking at your snippet, I notice a few key omissions. Here's a complete, working version of your code with explanations:

var app = angular.module('myApp', ['base64']); 

// Important: Inject $base64 into your controller (you had the module dependency but missed the injection!)
app.controller('customersCtrl', function($scope, $http, $base64) { 
  // 1. Define your credentials
  const username = "your-actual-username";
  const password = "your-actual-password";

  // 2. Build the Basic Auth header correctly
  const authCredentials = $base64.encode(`${username}:${password}`);
  const authHeader = `Basic ${authCredentials}`; // Don't forget the space after "Basic"!

  // 3. Make the GET request with proper headers and handle the promise
  $http({
    method: 'GET',
    url: 'your-target-api-url',
    headers: {
      'Authorization': authHeader,
      // Adjust Content-Type based on what your API expects (application/json is common)
      'Content-Type': 'application/json'
    }
  })
  .then(function(response) {
    // Success: Handle your response data here
    $scope.responseData = response.data;
    console.log("Request succeeded!", response);
  })
  .catch(function(error) {
    // Critical: Always handle errors to see what's going wrong!
    console.error("Request failed:", error);
    console.error("Status code:", error.status);
    console.error("Error message:", error.statusText);
  });
});

Common Mistakes You Might Be Making #

Here are the most likely reasons your request isn't returning a response:

• Forgot to inject the $base64 service: You added the base64 module dependency, but didn't pass $base64 as a parameter to your controller. Without this, Angular can't find the service, and you'll get a console error (check your browser dev tools!).
• Incorrect Authorization header format: The header must follow the pattern Basic [base64-encoded username:password]. Missing the space after "Basic" or encoding the credentials incorrectly will cause the server to reject the auth.
• Not handling the $http promise: $http returns a promise, so you need to use .then() for success and .catch() for errors. If you skip these, even if the request works, you won't see any output (making it look like "no response").
• Ignoring error details: Even if the request fails (e.g., 401 Unauthorized), you won't know unless you log the error. Always check the browser's Network tab to see the request status and headers sent.
• CORS restrictions: Even if the browser can access the URL directly, Angular's AJAX request might hit CORS limits. Verify your server allows your frontend domain to make cross-origin requests and permits the Authorization header.

Alternative Approach: Global Auth Headers #

If your entire app needs Basic Auth, you can set the header globally instead of per request:

app.config(function($httpProvider, $base64) {
  const username = "your-username";
  const password = "your-password";
  $httpProvider.defaults.headers.common['Authorization'] = `Basic ${$base64.encode(`${username}:${password}`)}`;
});

// Then in your controller, just make a simple GET request
app.controller('customersCtrl', function($scope, $http) { 
  $http.get('your-target-api-url')
  .then(function(response) {
    $scope.responseData = response.data;
  })
  .catch(function(error) {
    console.error("Error:", error);
  });
});

Quick Debugging Steps #

1. Open your browser's Dev Tools > Network tab and look for your GET request. Check:
   • The Authorization header is present and formatted correctly.
   • The request status code (200 = success, 401 = auth failed, 403 = forbidden, etc.).
2. Check the Console tab for any Angular errors (like $base64 is not defined).

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