PurpleAir API请求404错误求助：PHP实现问题排查

修正后的完整代码 #

1. 后端PHP代理文件（命名为purpleair-proxy.php）

<?php
header("Access-Control-Allow-Origin: *"); // 测试用，生产环境建议限制指定域名
header("Content-Type: application/json");

$apiKey = "19E223A3-3837-11ED-B5AA-42010A800006";
$sensorId = "142696";
$url = "https://api.purpleair.com/v1/sensors/{$sensorId}";

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    "X-API-Key: {$apiKey}"
]);

$response = curl_exec($ch);
curl_close($ch);

echo $response;
?>

2. 前端HTML文件

<html>
    <body>
        <script type="text/javascript">
        let AQI; // 声明全局变量存储AQI值

        function makeAPIRequest() {
            const request = new XMLHttpRequest();
            // 调用本地PHP代理接口，避免跨域
            request.open('GET', './purpleair-proxy.php');
            request.send();

            request.onload = ()=>{
                if (request.status === 200) {
                    const given = JSON.parse(request.response);
                    console.log(given.sensor);

                    // 获取PM2.5数据
                    const PM = given.sensor.stats["pm2.5_10minute"];
                    console.log("PM2.5: " + PM);

                    // 计算AQI并更新页面
                    AQI = calcAQIFromPM(PM);
                    console.log("AQI: " + AQI);
                    setAQIText();
                    setAQIColor();
                } else {
                    console.error("请求失败，状态码：" + request.status);
                }
            }
        }

        // 计算AQI值
        function calcAQIFromPM(pm) {
            const table = [
                [0.0, 12.0, 0, 50],
                [12.1, 35.4, 51, 100],
                [35.5, 55.4, 101, 150],
                [55.5, 150.4, 151, 200],
                [150.5, 250.4, 201, 300],
                [250.5, 500.4, 301, 500],
            ];

            const computeAqi = (concI, [concLo, concHi, aqiLo, aqiHi]) =>
                Math.round(
                ((concI - concLo) / (concHi - concLo)) * (aqiHi - aqiLo) + aqiLo
                );

            const values = table.find(([concLo, concHi]) => pm >= concLo && pm <= concHi);
            return values ? computeAqi(pm, values) : 500;
        }

        // 更新AQI文本显示
        function setAQIText() {
            document.getElementById("AQI").textContent = AQI;
        }

        // 更新AQI颜色块
        function setAQIColor() {
            const colorDiv = document.getElementById("colorDiv");
            if (!colorDiv) return;

            if(AQI < 50) {
                colorDiv.style.backgroundColor = "green";
            } else if(AQI >= 50 && AQI < 100) {
                colorDiv.style.backgroundColor = "yellow";
            } else if(AQI >= 100 && AQI < 150) {
                colorDiv.style.backgroundColor = "orange";
            } else if(AQI >= 150 && AQI < 200) {
                colorDiv.style.backgroundColor = "red";
            } else if(AQI >= 200 && AQI < 300) {
                colorDiv.style.backgroundColor = "purple";
            } else if(AQI >= 300) {
                colorDiv.style.backgroundColor = "brown";
            }
        }

        // 页面加载完成后绑定按钮点击事件
        window.onload = () => {
            const btn = document.getElementById("getAQI");
            if (btn) {
                btn.addEventListener("click", makeAPIRequest);
            }
        }
        </script>
            <h1> 当前AQI </h1>
            <div id="colorDiv" style="width: 100px; height: 100px; border: 1px solid #ccc;">
                <h2 id="AQI">---</h2>
            </div>
            <button id="getAQI">获取当前AQI</button>
    </body>
</html>

额外注意事项 #

• 确保PHP环境已启用curl扩展，否则无法发起后端请求。
• 生产环境不要将API Key硬编码，建议用环境变量存储。
• 跨域头Access-Control-Allow-Origin: *仅用于测试，正式环境需指定允许的前端域名，避免安全风险。

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