NextJS/React集成Google Places API：CORS及客户端调用疑问求助

1. 解决CORS问题的可行方案 #

Google Places Web Service API是为服务器端调用设计的，前端直接请求必然触发CORS限制，no-cors模式只能拿到无法解析的opaque响应，完全满足不了你获取结果数组的需求。结合你用Firebase开发的场景，最适配的方案是用Firebase Cloud Functions做一层代理——这是Firebase自带的服务，不需要额外搭建服务器，也无需所谓的"Google后端权限"，具体步骤如下：

步骤1：编写Firebase Cloud Function #

在你的Firebase项目根目录的functions文件夹中创建函数：

const functions = require("firebase-functions");
const axios = require("axios"); // 也可以用node-fetch替代

exports.getPlaceSuggestions = functions.https.onCall(async (data, context) => {
  const { input, lat, lng, apiKey } = data;
  let url = `https://maps.googleapis.com/maps/api/place/findplacefromtext/json?key=${apiKey}&input=${encodeURIComponent(input)}&inputtype=textquery`;
  
  // 若传入经纬度，添加位置偏好参数（这里设5000米半径，可按需调整）
  if (lat && lng) {
    url += `&locationbias=circle:5000@${lat},${lng}`;
  }

  try {
    const response = await axios.get(url);
    return response.data; // 将API结果返回给前端
  } catch (error) {
    throw new functions.https.HttpsError("internal", "获取地点失败", error.message);
  }
});

部署该函数：

firebase deploy --only functions:getPlaceSuggestions

步骤2：前端调用Cloud Function #

在React/NextJS组件中通过Firebase的functions SDK调用：

import { getFunctions, httpsCallable } from "firebase/functions";
import { useEffect, useState } from "react";

const PlaceInput = () => {
  const [input, setInput] = useState("");
  const [places, setPlaces] = useState([]);
  const functions = getFunctions();
  const getPlaceSuggestions = httpsCallable(functions, "getPlaceSuggestions");

  const fetchPlaces = async () => {
    if (!input.trim()) return;
    try {
      const result = await getPlaceSuggestions({
        input,
        lat: 你的纬度值, // 可通过navigator.geolocation获取用户当前位置
        lng: 你的经度值,
        apiKey: "你的Google API Key" // 更安全的做法是将API Key存在Cloud Function环境变量中
      });
      setPlaces(result.data.candidates || []); // 提取需要的结果数组
    } catch (error) {
      console.error("获取地点失败:", error);
    }
  };

  useEffect(() => {
    const timer = setTimeout(fetchPlaces, 500); // 简单防抖避免频繁请求
    return () => clearTimeout(timer);
  }, [input]);

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入地点名称/地址"
      />
      <ul>
        {places.map((place, index) => (
          <li key={index}>{place.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default PlaceInput;

2. Google Web Service API vs Mapbox API #

Google Places Web Service API #

• 优势：全球地点数据覆盖广、精度高，支持多种筛选条件，和Google生态整合度好
• 注意：必须通过服务器端/Cloud Functions调用，免费额度有限，超出后按调用量收费，需注意预算；配置API Key时建议绑定Firebase项目或限制调用来源，提升安全性
• 可靠性：官方维护的API，稳定性有保障，只要权限配置合理就很可靠

Mapbox Geocoding API #

• 优势：原生支持前端直接调用（无CORS问题），文档对React/NextJS更友好，调用方式简单，免费额度足够小项目使用
• 前端直接调用示例：

import { useEffect, useState } from "react";

const PlaceInput = () => {
  const [input, setInput] = useState("");
  const [places, setPlaces] = useState([]);
  const MAPBOX_API_KEY = "你的Mapbox API Key";

  const fetchPlaces = async () => {
    if (!input.trim()) return;
    try {
      const response = await fetch(
        `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(input)}.json?access_token=${MAPBOX_API_KEY}&limit=5`
      );
      const data = await response.json();
      setPlaces(data.features || []); // 提取结果数组
    } catch (error) {
      console.error("获取地点失败:", error);
    }
  };

  useEffect(() => {
    const timer = setTimeout(fetchPlaces, 500);
    return () => clearTimeout(timer);
  }, [input]);

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入地点名称/地址"
      />
      <ul>
        {places.map((place, index) => (
          <li key={index}>{place.place_name}</li>
        ))}
      </ul>
    </div>
  );
};

export default PlaceInput;

如果你的项目对地点数据的全球覆盖精度要求极高，选Google；如果追求开发效率、不想折腾代理逻辑，Mapbox是更省心的选择。

内容的提问来源于stack exchange，提问作者Augusto M. G.