使用isomorphic-fetch发起GET请求时Basic认证异常求助

I’ve run into this exact problem before—when you’re sure you’ve added the Authorization header correctly but still get that WWW-Authenticate: Basic realm="Realm" response, it usually boils down to a small syntax mistake or misconfiguration. Let’s break down the fixes step by step:

1. Fix the Authorization Header Encoding #

Looking at your code, there’s a clear syntax error in how you’re generating the auth string:

// Your current (broken) code
"Basic " + window.btoa('uname+':'+password')

The issue is the way you’re concatenating the username and password. The window.btoa() function expects a single string in the format username:password, but your code has misplaced quotes and plus signs.

If uname and password are variables, fix it like this:

const authToken = window.btoa(`${uname}:${password}`); // Template literal for clean concatenation
const authHeader = `Basic ${authToken}`;

If you’re using hardcoded values, it should look like:

const authHeader = `Basic ${window.btoa("myUsername:myPassword")}`;

2. Correct the fetch Request Configuration #

Your _doGetParam function seems cut off, but there are a couple of issues to fix here:

• dataType: 'JSON' is not a valid option for fetch—fetch handles response parsing via response.json() later, so remove this.
• Make sure you’re properly passing the headers object to the fetch options.

Here’s the corrected version of your helper function:

_doGetParam(headers) {
  return {
    method: 'GET',
    headers: headers, // Or use `new Headers(headers)` for stricter compliance
    credentials: 'include'
  };
}

3. Check Cross-Origin (CORS) Settings (If Applicable) #

If your request is going to a different domain, your server needs to explicitly allow the Authorization header and credentials. Make sure the server returns these CORS headers:

• Access-Control-Allow-Origin: Set to your frontend domain (not * if using credentials)
• Access-Control-Allow-Headers: Include Authorization
• Access-Control-Allow-Credentials: true

Without these, browsers will strip the Authorization header before sending the request, which explains why the server is asking for auth again.

4. Verify Server-Side Handling #

Double-check that your server is actually parsing the Authorization header. Some servers are configured to only trigger Basic Auth via the browser’s popup prompt, ignoring manually sent headers. For example, in Node.js you might use the basic-auth package to extract credentials from the header, or in NGINX ensure your auth configuration doesn’t block manually sent headers.

Full Corrected Code Example #

Putting it all together, your function should look like this:

doGetAuthRaceReplay(url) {
  // Ensure uname and password are valid variables in scope
  const authToken = window.btoa(`${uname}:${password}`);
  const requestHeaders = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Basic ${authToken}`
  };
  return fetch(url, this._doGetParam(requestHeaders));
}

_doGetParam(headers) {
  return {
    method: 'GET',
    headers: headers,
    credentials: 'include'
  };
}

Start with fixing the auth string encoding—that’s the most likely culprit here. If that doesn’t work, move on to checking CORS and server-side parsing.

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