客户端JavaScript使用Google Maps Directions API的CORS问题及用法咨询

1. 调用失败的核心原因 #

• CORS是服务端控制的安全策略，Access-Control-Allow-Origin属于响应头，需要被请求的服务端（谷歌API服务）返回才生效，你在客户端请求头里加这个字段完全没有作用。
• Google Maps Directions API的JSON格式接口本身就不支持跨域前端调用，官方没有为这个接口配置CORS响应头，因此任何直接从浏览器前端发起的请求都会被同源策略拦截。
• no-cors模式的设计目的是处理不需要读取响应内容的跨域请求（比如埋点上报），这种模式下返回的opaque响应本来就不允许读取返回内容，自然无法拿到JSON数据。
• 你直接打开本地HTML文件测试的场景是file://协议，同源策略的限制比普通HTTP域名更严格，就算接口支持CORS也大概率会报错。

2. 客户端调用的正确方案 #

你是开发Firefox扩展的场景，优先用扩展的权限机制绕过CORS限制，这是最简便的方案：

步骤1：配置扩展权限 #

在扩展的manifest.json的permissions字段中添加谷歌API的域名权限：

{
  "name": "你的扩展名称",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "https://maps.googleapis.com/*"
  ]
}

配置后扩展发起的请求不受同源策略限制，不需要CORS头就能正常读取响应。

步骤2：修正后的请求代码 #

你之前的fetch链没有处理JSON解析，修正后的代码如下：

const listing_address = "Cañon City, Colorado"
const goal_address = "Royal Gorge Bridge & Park, Colorado"
const google_maps_base_url = "https://maps.googleapis.com/maps/api/directions/json?"
const api_key = "你的实际API密钥"

const query_data = new URLSearchParams({
    key: api_key,
    origin: listing_address,
    destination: goal_address,
})
const query_url = google_maps_base_url + query_data.toString()

fetch(query_url)
    .then(res => res.json()) // 先把响应转成JSON格式
    .then(data => {
        console.log("路线数据：", data)
        // 后续处理逻辑写在这里
    })
    .catch(err => {
        console.error("请求出错：", err)
    })

普通网页场景的通用方案 #

如果是普通网页开发，不要直接调用JSON接口，使用官方提供的Maps JavaScript API内置的Directions Service即可，不需要自行处理跨域问题，示例代码如下：

<!-- 先引入官方JS SDK，密钥替换为你自己的API密钥 -->
<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap" async defer></script>
<script>
function initMap() {
  const directionsService = new google.maps.DirectionsService();
  directionsService.route({
    origin: "Cañon City, Colorado",
    destination: "Royal Gorge Bridge & Park, Colorado",
    travelMode: google.maps.TravelMode.DRIVING,
  }, (response, status) => {
    if (status === "OK") {
      console.log("路线数据：", response)
      // 后续处理逻辑
    } else {
      console.error("请求失败：", status)
    }
  });
}
</script>

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