同主域子域名应用本地登录异常排查：name.mydomain.com登录失败原因分析

Let’s dig into why your name.mydomain.com (app1) is failing to log in locally (but works in production) while your name2.mydomain.com (app2) works fine everywhere. The key clues are in the differences between the two apps' authorization.js files and your local environment setup.

1. Check for Missing REACT_APP_VERSION Environment Variable #

The most significant difference between app1 and app2’s auth code is that app1 adds an extra request header:

'X-xxx-App-Version': process.env.REACT_APP_VERSION,

In production, this environment variable is almost certainly configured properly, but your local dev setup might be missing it. If this value is undefined, your backend could be rejecting the request silently (without returning a clear error message).

How to Verify: #

• Open your browser’s DevTools > Network tab, then try logging in.
• Find the login request or the subsequent /me request (called after login) and check its Request Headers.
• If X-xxx-App-Version shows up as undefined, this is the root cause.

Fix: #

Create or edit your local .env file in app1’s root directory and add:

REACT_APP_VERSION=1.0.0

Restart your local dev server to apply the change.

2. Inspect Login Request/Response for Silent Errors #

You mentioned no error messages appear when login fails—this suggests the error isn’t being caught or displayed by your frontend code.

Steps to Debug: #

1. In DevTools > Network, look at the Response tab of your login request. Check for error status codes (400, 401, 500) and any hidden error details in the response body.
2. Ensure your login component code is chaining the error handlers from authorization.js and includes a catch block to display errors. For example:

// Example login request code (adapt to your app1's implementation)
fetch(`${API_SERVER}/login`, {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({email: yourEmail, password: yourPassword})
})
.then(unauthorizedHandler)
.then(planNotSuitableHandler)
.then(res => res.json())
.then(data => {
  storeAccessToken(data.token);
  hashHistory.push('/dashboard'); // Redirect on success
})
.catch(err => {
  console.error('Login error:', err);
  alert(`Login failed: ${err.message}`); // Show error to user
});

If your current login code skips these handlers or lacks a catch block, errors will be swallowed silently.

3. Confirm Local API Server Configuration #

Double-check that app1’s local API endpoint is correctly set and that the backend isn’t blocking local requests:

• Verify REACT_APP_API_URL in your local .env file points to your local backend (not the production API, which might reject local requests for security).
• Check your app1 backend logs for any validation errors related to the X-xxx-App-Version header—if the backend requires this header to be present and valid, a missing/undefined value would cause login to fail.

4. Verify Token Storage Logic #

While app1 uses accessToken as the localStorage key (vs app2’s accessTokenCompanies), this shouldn’t cause a local-only issue since production works. But it’s quick to confirm:

• After attempting to log in, open DevTools > Application > Local Storage > localhost:[your-port].
• Check if the accessToken key exists and has a valid token. If it’s missing, either the login request failed to return a token, or the storeAccessToken function isn’t being triggered correctly.

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