保护Leaflet地图API密钥：通过Laravel服务器端代理实现教程

let map = L.map('map').setView([28.7041, 77.1025], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);

// 存在API密钥直接暴露的风险
L.tileLayer(`https://tiles.breezometer.com/v1/air-quality/breezometer-aqi/current-conditions/{z}/{x}/{y}.png?key=${API_KEY}`, {
    tms: false,
    opacity: 0.65,
    maxNativeZoom: 19
}).addTo(map);

// routes/web.php

use App\Http\Controllers\MapProxyController;

Route::get('/map-tiles/{source}/{z}/{x}/{y}.png', [MapProxyController::class, 'getTile'])->name('map.tile.proxy');

php artisan make:controller MapProxyController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use Symfony\Component\HttpFoundation\Response;

class MapProxyController extends Controller
{
    /**
     * 代理请求第三方地图瓦片服务，隐藏API密钥。
     *
     * @param string $source 瓦片源标识符 (例如: breezometer-aqi)
     * @param int $z Zoom级别
     * @param int $x X坐标
     * @param int $y Y坐标
     * @return \Illuminate\Http\Response|\Illuminate\Http\Client\Response
     */
    public function getTile(Request $request, string $source, int $z, int $x, int $y)
    {
        // 从环境变量中获取API密钥，确保密钥不硬编码
        $breezometerApiKey = env('BREEZOMETER_API_KEY');

        if (empty($breezometerApiKey)) {
            // 密钥未配置，返回错误
            return response('API Key not configured.', Response::HTTP_INTERNAL_SERVER_ERROR);
        }

        // 根据source参数构建不同的API请求URL
        $apiUrl = '';
        switch ($source) {
            case 'breezometer-aqi':
                $apiUrl = "https://tiles.breezometer.com/v1/air-quality/breezometer-aqi/current-conditions/{$z}/{$x}/{$y}.png?key={$breezometerApiKey}";
                break;
            // 可以添加其他瓦片源
            // case 'another-service':
            //     $anotherServiceApiKey = env('ANOTHER_SERVICE_API_KEY');
            //     $apiUrl = "https://tiles.anotherservice.com/{$z}/{$x}/{$y}.png?key={$anotherServiceApiKey}";
            //     break;
            default:
                return response('Unsupported tile source.', Response::HTTP_BAD_REQUEST);
        }

        try {
            // 使用Laravel的HTTP客户端发送请求
            $response = Http::timeout(10)->get($apiUrl); // 设置超时时间

            // 检查响应状态
            if ($response->successful()) {
                // 获取原始图片内容和Content-Type头
                $contentType = $response->header('Content-Type') ?? 'image/png';

                // 返回图片内容，并设置正确的Content-Type头
                return response($response->body())->header('Content-Type', $contentType);
            } else {
                // 第三方API返回错误，将错误状态码和内容转发给前端
                return response($response->body(), $response->status())->header('Content-Type', $response->header('Content-Type'));
            }
        } catch (\Exception $e) {
            // 捕获请求过程中的异常
            return response('Failed to fetch tile: ' . $e->getMessage(), Response::HTTP_SERVICE_UNAVAILABLE);
        }
    }
}

let map = L.map('map').setView([28.7041, 77.1025], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);

// 前端现在请求您的Laravel代理
// 注意：'/map-tiles/breezometer-aqi/{z}/{x}/{y}.png' 对应您定义的路由
L.tileLayer('/map-tiles/breezometer-aqi/{z}/{x}/{y}.png', {
    tms: false,
    opacity: 0.65,
    maxNativeZoom: 19,
    attribution: 'Breezometer AQI' // 更新attribution
}).addTo(map);