React Autodesk Forge创建Bucket时.env传headers返回undefined如何解决

一、环境变量返回undefined的修复方案 #

• 首先确认.env文件存放位置：必须放在React项目根目录（和package.json同级，不要放在src文件夹内）
• 检查.env文件内变量写法：不要加多余空格、不要给值加不必要的引号，命名必须保持REACT_APP_开头，示例写法如下：

# 根目录.env文件示例
REACT_APP_FORGE_CLIENT_ID=你的Autodesk客户端ID
REACT_APP_FORGE_CLIENT_SECRET=你的Autodesk客户端密钥
REACT_APP_FORGE_ACCESS_TOKEN=你的临时访问令牌

• 修改完.env文件后必须重启React开发服务器，新的环境变量才会生效
• 临时硬编码方案：直接把对应参数位置的process.env.xxx替换成实际字符串即可，比如client_id: "你实际的客户端ID"

二、Autodesk Forge接口的正确配置 #

你当前的请求逻辑存在配置错误：Forge的认证接口不需要把client_id、client_secret放在请求头，参数需要放在请求体，scope也需要配置在请求体中，修正后的完整代码如下：

import React, { useEffect } from 'react'
import axios from 'axios'

const Buckets = () => {
  useEffect(() => {
    const getTokenOptions = {
      method: 'POST',
      url: 'https://developer.api.autodesk.com/authentication/v1/authenticate',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      // 认证参数放在请求体中
      data: new URLSearchParams({
        client_id: process.env.REACT_APP_FORGE_CLIENT_ID,
        client_secret: process.env.REACT_APP_FORGE_CLIENT_SECRET,
        grant_type: 'client_credentials',
        // 传入你需要的权限，多个权限用空格分隔
        scope: 'bucket:create bucket:read',
      }).toString()
    }

    // 发送认证请求拿到令牌后，再调用创建Bucket的接口
    axios(getTokenOptions)
      .then(res => {
        const accessToken = res.data.access_token
        console.log('获取到的访问令牌：', accessToken)
        // 后续创建Bucket时，请求头加上 Authorization: `Bearer ${accessToken}` 即可
      })
      .catch(err => console.error('认证失败：', err))
  }, [])

  return <div>Buckets</div>
}

export default Buckets

注意：前端直接暴露Client ID、Client Secret存在极高安全风险，调试完成后务必把所有认证逻辑、密钥信息全部迁移到后端实现，前端仅调用后端封装好的业务接口。

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