Flutter Web中如何隐藏index.html内的API密钥（非控制台限制方式）

由于Flutter Web属于前端应用，直接在浏览器端加载含密钥的脚本必然会暴露密钥，所以最可靠的解决方式是通过后端中转请求，将密钥完全放在后端环境中，前端不再直接接触密钥。

具体实现步骤 #

1. 移除前端的密钥引用 #

先删掉index.html中直接引入的Google Maps脚本，不再让密钥出现在前端代码里：

<!-- 删掉这行带密钥的脚本 -->
<!-- <script src="https://maps.googleapis.com/maps/api/js?key={MY_KEY}"></script> -->

2. 搭建后端代理接口 #

在你的后端服务（Node.js、Dart后端、Java等均可）中创建代理接口，负责转发Google Maps的API请求，并在后端注入密钥。

以Node.js（Express框架）为例，简单实现：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 从环境变量读取密钥，避免硬编码
const GOOGLE_MAPS_KEY = process.env.GOOGLE_MAPS_KEY;

// 配置代理规则
app.use('/maps-proxy', createProxyMiddleware({
  target: 'https://maps.googleapis.com',
  changeOrigin: true,
  pathRewrite: (path) => path.replace('/maps-proxy', ''),
  onProxyReq: (proxyReq) => {
    // 在请求中添加密钥参数
    const url = new URL(proxyReq.path, 'https://maps.googleapis.com');
    url.searchParams.set('key', GOOGLE_MAPS_KEY);
    proxyReq.path = url.pathname + url.search;
  }
}));

app.listen(3000);

3. Flutter Web中适配代理地址 #

修改Flutter代码里的地图加载配置，将请求指向你的后端代理地址。以google_maps_flutter_web包为例：

import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  GoogleMapsFlutterWeb.instance.initialize(
    apiUrl: 'https://你的后端域名/maps-proxy/api/js', // 指向代理接口
    apiKey: '', // 前端不再需要填写密钥
  );
  runApp(MyApp());
}

4. 关键注意点 #

• 后端密钥必须存在环境变量中，禁止硬编码在代码里，防止泄露到版本控制系统。
• 给后端代理接口添加访问限制，比如只允许你的Flutter Web域名发起请求，避免被恶意调用消耗API配额。
• 如果使用的地图组件不支持自定义加载地址，需要自己封装地图脚本的加载逻辑，通过代理地址拉取资源。

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