如何在Cordova封装的移动端应用中通过API从GCP获取数据？解决CORS错误

嘿，我之前在Cordova项目里调用Google Maps API时也踩过这个CORS的坑，给你几个实际可行的解决思路：

1. 配置Cordova的内容安全策略（CSP）和访问白名单 #

Cordova有自己的安全机制，你需要在项目里明确允许访问Google的API域名：

• 在config.xml中添加访问白名单规则：

<access origin="https://maps.googleapis.com" />
<allow-navigation href="https://maps.googleapis.com/*" />

• 在index.html的<head>里更新CSP meta标签，允许加载Google的资源：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://maps.googleapis.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

注意调整default-src里的规则，确保包含https://maps.googleapis.com。

2. 用后端代理转发请求（最推荐的方案） #

Google Maps Directions API本质是为服务器端调用设计的，直接前端调用不仅有CORS问题，还会暴露你的API密钥（风险很高！）。更好的做法是自己搭一个简单的后端代理：

• 比如用Node.js写个小接口，前端请求你的代理接口，代理再去调用Google的API：

// 示例Node.js代理代码（用Express）
const express = require('express');
const axios = require('axios');
const app = express();

app.get('/api/directions', async (req, res) => {
  const { origin, destination } = req.query;
  const apiKey = '你的API密钥';
  try {
    const response = await axios.get(`https://maps.googleapis.com/maps/api/directions/json?origin=${origin}&destination=${destination}&key=${apiKey}`);
    res.json(response.data);
  } catch (error) {
    res.status(error.response.status).json(error.response.data);
  }
});

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

然后前端代码改成请求你的代理地址：http://localhost:3000/api/directions?origin=Tel+Aviv&destination=Shoham，这样就完全避开了CORS问题，还能保护你的API密钥不被泄露。

3. 检查Google Cloud控制台的API设置（可选） #

虽然大部分Google Maps API不支持直接前端的CORS，但你可以去Google Cloud控制台的API密钥设置页面，看看是否能添加http://localhost:8100到允许的HTTP引用列表里。不过这个方法不一定有效，因为Directions API本身限制了前端直接调用，所以还是优先考虑代理方案。

另外提醒一下：把API密钥直接写在前端代码里非常危险，很容易被爬取滥用，导致你的账户产生高额费用，所以一定要用代理的方式隐藏密钥！

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