如何在React组件中访问Laravel环境变量配置API密钥？

核心思路 #

Laravel的.env文件变量无法直接被前端JS读取，必须通过Blade视图将变量注入到全局window对象中，再在React组件里调用。

步骤1：在Blade视图中注入环境变量 #

找到加载React组件的Blade模板（比如resources/views/react-app.blade.php），在页面头部添加脚本，把.env中的API密钥暴露给前端：

<script>
    window.AppSettings = {
        apiToken: "{{ env('API_TOKEN') }}"
    };
</script>

确保你的.env文件中已定义API_TOKEN=你的实际密钥，生产环境下记得执行php artisan config:cache刷新配置缓存。

步骤2：修改http.js读取全局变量 #

将http.js中硬编码的Bearer令牌替换为全局变量：

import axios from "axios"

export default axios.create({
    baseURL: window.location.origin + "/api/",
    headers: {
        "Content-type": "application/octet-stream",
        "Authorization": `Bearer ${window.AppSettings.apiToken}`
    },
})

可选：用户动态令牌场景（比如登录后获取） #

如果你的API令牌是用户登录后生成的（如Sanctum/Passport令牌），可以将令牌存储在localStorage中，再在http.js中读取：

// 登录成功时保存令牌
localStorage.setItem('user_api_token', response.data.access_token);

// http.js中读取令牌
const authToken = localStorage.getItem('user_api_token');
export default axios.create({
    baseURL: window.location.origin + "/api/",
    headers: {
        "Content-type": "application/octet-stream",
        "Authorization": authToken ? `Bearer ${authToken}` : ''
    },
})

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