在.env存储API key并在React组件请求链接中使用失效如何解决

• .env 文件配置错误：你当前在 .env 中将API密钥用大括号包裹，实际环境变量不需要加任何包裹符号，最终注入到代码中的API密钥会额外携带{}字符，导致接口校验不通过。即使你console.log打印看起来正常，也可能存在肉眼不易察觉的多余字符。
• useEffect 缺少依赖数组：当前代码中useEffect没有传入第二个依赖参数，会在组件每次渲染时无限重复发起请求，很快就会触发天气接口的限流/反爬规则，导致请求被拒绝。
• 接口协议错误：你使用的是http协议的接口地址，如果你本地开发环境是https协议，浏览器会拦截混合内容请求，导致请求失败。
• 初始参数无效：如果父组件传入的savedCoordinates初始为空对象/undefined，首次请求时lat和lon参数为undefined，会直接触发接口报错。

1. 修正 .env 文件配置，移除API密钥外层的所有包裹符号，示例如下：

REACT_APP_WEATHER_API_KEY=你的实际密钥字符串，不要加引号、大括号等任何额外符号

修改后重启开发服务器，确认console.log打印的API_Key和你在开放平台拿到的密钥完全一致。

2. 给useEffect添加依赖数组，只在坐标或API密钥变化时发起请求，同时增加参数合法性校验，避免无效请求。

3. 将接口地址的http协议替换为https，避免浏览器拦截。

修改后的完整代码如下：

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

export default function Chart(props) {
    const [hourlyData, setHourlyData] = useState([]);
    const coordinates = props.savedCoordinates;
    const API_Key = process.env.REACT_APP_WEATHER_API_KEY;

    useEffect(() => {
        // 增加参数校验，避免无效请求
        if (!coordinates?.lat || !coordinates?.lon || !API_Key) return;

        // 可打印拼接后的地址排查问题，复制到浏览器直接访问即可验证是否正常
        const requestUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${coordinates.lat}&lon=${coordinates.lon}&exclude=current,minutely,daily,alerts&appid=${API_Key}`;
        console.log('请求地址：', requestUrl);

        axios.get(requestUrl)
        .then((response) => {
            console.log(response.data);
            setHourlyData(response.data.hourly || []);
        })
        .catch((error) => {
            // 打印完整错误信息，方便定位问题
            console.log('请求错误：', error.response?.data || error.message);
        })
    // 添加依赖数组，避免无限请求
    }, [coordinates, API_Key]);

    // 其余组件逻辑...
}

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