Angular2调用MarkLogic服务遇401未授权问题求解决方案

Let's break down the issues in your code and fix the 401 error step by step:

Key Issues in Your Current Code #

• Wrong Authentication Scheme: You're using Bearer for username/password authentication, but this scheme is designed for OAuth tokens. For basic username/password auth, you need to use the Basic scheme instead.
• Immutable HttpHeaders Misuse: Angular's HttpHeaders are immutable—each set() call returns a new instance, so your original httpHeaders variable wasn't actually updated with the headers you tried to set.
• Unnecessary CORS Request Headers: Headers like Access-Control-Allow-Origin and Access-Control-Allow-Credentials are response headers that the MarkLogic server should send, not request headers from your Angular app. Setting them in your request doesn't help and can cause unexpected behavior.

Step-by-Step Fixes #

1. Correct the Authentication Header #

Replace Bearer with Basic when setting the Authorization header. This is the standard scheme for basic username/password authentication.

2. Properly Construct HttpHeaders #

Since HttpHeaders are immutable, either reassign the variable after each set() call, or initialize all headers in the constructor for cleaner, working code.

3. Remove Unnecessary CORS Headers #

Strip out the Access-Control-* headers from your request—these are handled by the server's CORS configuration, not your client code.

4. Verify MarkLogic CORS Configuration #

Ensure your MarkLogic server is configured to:

• Allow your Angular app's origin (e.g., http://localhost:4200)
• Allow credentials (since you're sending auth headers)
• Permit the GET method and Authorization header

Corrected Code Snippet #

getPolicies() {
  const username: string = 'admin';
  const password: string = 'admin';
  // Encode credentials and create valid Basic auth header
  const authHeader = 'Basic ' + btoa(username + ':' + password);
  
  // Build HttpHeaders correctly (immutable, so chain set calls)
  const httpHeaders = new HttpHeaders()
    .set("Authorization", authHeader);
    // Only keep Content-Type if your MarkLogic endpoint explicitly requires it
    // .set("Content-Type", "application/x-www-form-urlencoded");

  this.http.get(this.serverUrl, { 
    headers: httpHeaders,
    withCredentials: true // Critical for authenticated CORS requests
  })
    .toPromise()
    .then(policy => console.log("policy values:"+ JSON.stringify(policy, null, 2)))
    .catch(err => console.log("error value:"+ JSON.stringify(err, null, 2)));
}

Additional Notes #

• Add withCredentials: true to your request options—this tells Angular to send authentication credentials along with the request, which is mandatory for authenticated cross-origin requests.
• If your MarkLogic API doesn't require application/x-www-form-urlencoded for GET requests, you can remove that header entirely—GET requests typically don't need a Content-Type header unless you're sending a request body (which you aren't here).
• Double-check that your MarkLogic user account has the correct permissions to access the specific endpoint you're calling.

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