React项目使用axiosInstance传Bearer令牌遇empty_url_error问题求助

错误原因分析 #

empty_url_error 本质是MSAL执行身份验证请求时，发现某个必填URL配置项为空或null。结合你的代码，重点排查以下几点：

1. 环境变量未正确加载 #

检查以下环境变量是否存在有效值：

• REACT_APP_AUTHORITY：必须是完整的权限地址（如https://login.microsoftonline.com/{tenant-id}），不能为空
• REACT_APP_OAUTH_SCOPE_URL：API权限范围的URL参数不能为空，需是有效的资源标识符
• REACT_APP_BASEURL_PROJECT：Axios的baseURL为空会导致后续请求触发URL错误

可添加日志验证变量是否加载成功：

console.log("Authority:", process.env.REACT_APP_AUTHORITY);
console.log("Scope URL:", process.env.REACT_APP_OAUTH_SCOPE_URL);
console.log("Axios BaseURL:", process.env.REACT_APP_BASEURL_PROJECT);

2. 未处理Account为空的场景 #

msalInstance.getAllAccounts()[0] 可能返回null（比如用户未登录），此时调用acquireTokenSilent会触发异常，进而导致内部URL处理错误，必须先判断账户是否存在。

3. Axios拦截器缺少错误处理 #

当前请求拦截器未捕获getAccessToken的异常，一旦token获取失败，会导致Axios请求挂起或抛出未处理错误。

修改后的代码示例 #

import axios from 'axios';
import { PublicClientApplication, InteractionRequiredAuthError } from '@azure/msal-browser';

const getAxiosInstance = () => {
  // 校验必填环境变量
  const requiredEnvVars = [
    'REACT_APP_CLIENT_ID',
    'REACT_APP_AUTHORITY',
    'REACT_APP_OAUTH_SCOPE_URL',
    'REACT_APP_BASEURL_PROJECT'
  ];
  requiredEnvVars.forEach(varName => {
    if (!process.env[varName]) {
      throw new Error(`环境变量 ${varName} 未配置`);
    }
  });

  const msalConfig = {
    auth: {
      clientId: process.env.REACT_APP_CLIENT_ID,
      authority: process.env.REACT_APP_AUTHORITY,
      redirectUri: window.location.origin,
    },
  };
  
  const msalInstance = new PublicClientApplication(msalConfig);
  let account = msalInstance.getAllAccounts()[0];

  const scopes = ["openid", "profile", process.env.REACT_APP_OAUTH_SCOPE_URL];

  const getAccessToken = async () => {
    if (!account) {
      // 无已登录账户时触发登录
      await msalInstance.loginRedirect({ scopes });
      // 登录后重新获取账户
      account = msalInstance.getAllAccounts()[0];
      if (!account) throw new Error("登录后未获取到账户信息");
    }

    try {
      const response = await msalInstance.acquireTokenSilent({
        scopes,
        account,
      });
      return response.accessToken;
    } catch (err) {
      // 静默获取失败，尝试交互式获取
      if (err instanceof InteractionRequiredAuthError) {
        const response = await msalInstance.acquireTokenPopup({ scopes, account });
        return response.accessToken;
      }
      throw err;
    }
  };

  const axiosInstance = axios.create({
    baseURL: process.env.REACT_APP_BASEURL_PROJECT,
  });

  axiosInstance.interceptors.request.use(async (config) => {
    try {
      const token = await getAccessToken();
      config.headers.Authorization = `Bearer ${token}`;
      return config;
    } catch (err) {
      console.error("获取Token失败:", err);
      // 可添加自定义错误处理，比如重定向到登录页
      return Promise.reject(err);
    }
  });

  return axiosInstance;
};

export default getAxiosInstance();

额外注意事项 #

• React项目中环境变量必须以REACT_APP_开头才能被正确加载，确保.env文件中变量名拼写无误
• 登录流程完成后，需在应用入口处调用msalInstance.handleRedirectPromise()处理MSAL的回调，完成账户缓存
• 若使用loginRedirect，确保路由配置不会拦截回调路径

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