调用Google Maps API时Fetch方法遭遇CORS问题求助

首先得给你点破关键：你之前在Express里配置的CORS规则只对请求你自己服务器的请求生效，但你是直接从前端fetch请求Google的API服务器——Google的服务器没返回Access-Control-Allow-Origin头，所以浏览器才会拦截响应，这就是你的配置完全没用的原因。

下面给你几个可行的解决方案，按推荐程度排序：

1. 使用官方Google Maps JavaScript SDK（最推荐） #

Google官方提供的前端SDK已经帮你处理了跨域、API密钥验证等所有麻烦，完全不需要自己写fetch。举个Places API的例子（其他API逻辑类似）：

首先在HTML里引入SDK：

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

然后在JS里调用服务：

// 初始化Places服务（用一个空DOM元素占位即可）
const service = new google.maps.places.PlacesService(document.createElement('div'));

// 发送搜索请求
service.nearbySearch({
  location: new google.maps.LatLng(37.7749, -122.4194), // 示例坐标：旧金山
  radius: 5000,
  type: ['restaurant']
}, (results, status) => {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    // 处理返回的餐厅数据
    console.log(results);
  }
});

这种方式完全绕开了CORS问题，也是Google官方最推荐的前端集成方式。

2. 用你的Express服务器做代理 #

如果一定要用fetch，可以让前端请求你自己的Express接口，再由Express去请求Google Maps API，最后把结果返回给前端。服务器端请求第三方API没有跨域限制，同时你的Express的CORS配置会对前端请求生效。

步骤1：在Express里添加代理路由 #

先安装node-fetch（或者用你习惯的HTTP客户端）：

npm install node-fetch

然后在Express里写代理路由：

import fetch from 'node-fetch';
import cors from 'cors';
import express from 'express';

const app = express();
app.use(cors({ origin: '*' })); // 现在这个配置有用了，因为前端请求的是你的服务器

// 代理Google Maps API的路由
app.get('/api/google-maps/restaurants', async (req, res) => {
  try {
    const googleApiKey = 'YOUR_GOOGLE_API_KEY';
    // 接收前端传递的参数，比如位置、搜索半径
    const { location, radius } = req.query;
    const googleUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${location}&radius=${radius}&key=${googleApiKey}`;
    
    const response = await fetch(googleUrl);
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3000);

步骤2：前端请求自己的代理接口 #

// 前端不再直接请求Google，而是请求你的Express接口
fetch('http://localhost:3000/api/google-maps/restaurants?location=37.7749,-122.4194&radius=5000', { mode: 'cors' })
  .then(response => response.json())
  .then(restaurants => {
    console.log(restaurants);
  })
  .catch(err => {
    console.error(err);
  });

3. 检查Google Cloud控制台的API密钥设置 #

部分Google Maps API（比如部分Places接口）允许配置HTTP referrers来允许特定前端域名调用，但不是所有接口都支持。你可以登录Google Cloud控制台：

• 找到你的API密钥
• 在「应用限制」里选择「HTTP referrers (web sites)」
• 添加你的前端域名（比如http://localhost:3000/*）
• 确保你启用了对应的API（比如Places API、Maps JavaScript API等）

注意：这种方式只适用于Google允许前端直接调用的API，敏感API建议还是用服务器代理，避免密钥泄露。

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