使用AJAX调用Google Places API遇CORS错误求助

嘿，我之前也碰到过一模一样的情况——Geocode端点跑起来顺风顺水，Places却突然报CORS错，咱们一步步拆解排查：

1. 先盯紧API密钥的权限配置 #

这是最容易踩的坑：

• 登录Google Cloud控制台，找到你的API密钥，务必确认已经启用了Places API（划重点：Geocoding API和Places API是两个独立服务，得分别开启权限）。
• 同时检查密钥的「HTTP引用者」白名单，有没有把你的前端域名加进去？本地开发的话要精准填http://localhost:xxxx（xxxx是你的项目端口号），别漏了http/https前缀。

2. 核对Places API端点和请求参数 #

• 确保你调用的是客户端允许的Places接口，比如Autocomplete、Text Search这类公开的客户端可用端点，有些高级Places接口（比如Place Details的特定字段）可能仅限服务器端调用。
• 逐字检查请求URL里的参数：key有没有拼写错误？必要参数（比如query、input）是不是都传了，格式是否符合官方要求？

3. 调整AJAX请求的配置细节 #

虽然Geocode能正常跑，但Places对请求预检的要求可能更严格：

• 必须用GET请求（Places API绝大多数接口只支持GET），别用POST，否则会触发浏览器的复杂预检请求，很容易触发CORS限制。
• 别给GET请求加Content-Type: application/json这类多余的请求头，这会让浏览器额外发送OPTIONS预检，要是Places API服务器没正确处理，直接就会报错。

4. 先用工具验证API本身是否可用 #

拿curl或者Postman直接调用Places API的URL测试，比如：

curl "https://maps.googleapis.com/maps/api/place/textsearch/json?query=coffee&key=你的API密钥"

如果这个请求能正常返回数据，说明问题出在前端AJAX配置；如果也报错，那肯定是API密钥权限或者端点选择的问题。

5. 终极兜底方案：后端代理 #

要是以上排查都没用，那就搭个简单的后端代理，让后端去调用Places API，前端请求自己的后端接口，彻底绕开CORS限制。比如用Node.js+Express写个极简代理：

const express = require('express');
const axios = require('axios');
const app = express();
require('dotenv').config();

// 代理Places请求
app.get('/proxy/places', async (req, res) => {
  try {
    const { query, key = process.env.GOOGLE_API_KEY } = req.query;
    const response = await axios.get(`https://maps.googleapis.com/maps/api/place/textsearch/json`, {
      params: { query, key }
    });
    res.json(response.data);
  } catch (err) {
    res.status(err.response?.status || 500).json({ error: err.message });
  }
});

app.listen(3001, () => console.log('代理服务运行在3001端口'));

之后前端AJAX直接请求/proxy/places?query=coffee就可以了。

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