Flutter Web无法调用Google Maps Directions API问题求助

针对你遇到的Web端无法发起请求、Android和Postman正常的问题，除了API转发，还有以下几种可行方案：

1. 改用Google Maps JavaScript SDK发起请求 #

Flutter Web可以直接调用官方的JavaScript SDK，绕开XMLHttpRequest的CORS限制，这是官方推荐的Web端调用方式。

步骤： #

1. 在web/index.html中引入SDK（替换为你的API密钥）：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=routes"></script>

2. 添加JS辅助函数到index.html：

<script>
function getRoute(startLat, startLng, endLat, endLng, callback) {
  const directionsService = new google.maps.DirectionsService();
  directionsService.route({
    origin: new google.maps.LatLng(startLat, startLng),
    destination: new google.maps.LatLng(endLat, endLng),
    travelMode: google.maps.TravelMode.DRIVING
  }, (response, status) => {
    callback({ status, routes: response?.routes || [] });
  });
}
</script>

3. Dart代码中通过dart:js调用：

import 'dart:js' as js;
import 'dart:async';
import 'package:google_maps_flutter/google_maps_flutter.dart';

Future<List<LatLng>> fetchRouteCoordinates(LatLng start, LatLng end) async {
  final completer = Completer<List<LatLng>>();
  
  js.context.callMethod('getRoute', [
    start.latitude,
    start.longitude,
    end.latitude,
    end.longitude,
    (result) {
      if (result['status'] == 'OK') {
        final polyline = result['routes'][0]['overview_polyline']['points'];
        completer.complete(decodePolyline(polyline));
      } else {
        completer.completeError(Exception('获取路线失败：${result['status']}'));
      }
    }
  ]);
  
  return completer.future;
}

2. 修正Dio请求的URL构建方式 #

手动拼接URL可能导致参数编码错误，改用Uri类构建请求，确保参数符合规范：

Future<List<LatLng>> fetchRouteCoordinates(LatLng start, LatLng end) async {
  try {
    const String baseUrl = 'maps.googleapis.com';
    const String apiKey = '<API Key>';

    final uri = Uri.https(
      baseUrl,
      '/maps/api/directions/json',
      {
        'origin': '${start.latitude},${start.longitude}',
        'destination': '${end.latitude},${end.longitude}',
        'key': apiKey,
      },
    );

    final response = await Dio().getUri(uri);

    if (response.statusCode == 200) {
      final data = response.data;
      final polyline = data['routes'][0]['overview_polyline']['points'];
      return decodePolyline(polyline);
    } else {
      throw Exception('Failed to load directions');
    }
  } catch (e) {
    log.e(e);
    return [];
  }
}

3. 检查API密钥Web限制的细节 #

即使你设置了无限制或localhost，可能存在配置疏漏：

• 确保添加了开发环境的完整域名，包括端口（比如http://localhost:5000、http://127.0.0.1:5000）
• 允许通配符前缀（如http://localhost:*，注意Google仅支持末尾通配符）
• 确认Google Cloud控制台中Maps Directions API已启用（虽然Android能调用，但仍需检查Web端是否被意外限制）

4. 排查浏览器CORS具体错误 #

打开浏览器开发者工具（F12）→ Network标签，找到请求maps.googleapis.com的记录，查看Response Headers或Console中的具体CORS错误信息，比如：

• 是否提示Origin http://localhost:xxxx is not allowed by Access-Control-Allow-Origin
• 是否存在API密钥验证失败的细节（比如密钥无效、权限不足）

这些信息能直接定位问题根源，比Dio的泛化错误提示更有用。

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