小编Mic*_*ael的帖子

在我的 Nuxt 项目中，我使用 vue2-google-maps 库来创建 map 和 axios 从 Map API 获取数据。我想获得谷歌地图中 2 个位置之间的距离，所以我使用 Directions API：https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY。当我使用它与 Insomnia 时，我正常检索数据，如下图：

但是当我使用 axios 将它与 nuxt 一起使用时，我收到一些错误，例如：

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问Origin ' http://localhost:3000 '。

跨域读取阻止 (CORB) 阻止跨域响应https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY使用 MIME 类型 application/json。有关更多详细信息，请参阅https://www.chromestatus.com/feature/5629709824032768。

但是如果我将地理编码 API 与 nuxt 一起使用，它可以正常工作我尝试添加标题 Access-Control-Allow-Origin=* 但仍然出现错误。我不知道为什么我会收到这些错误。我的代码：

axios
  .get('https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY')
  .then(res => {
      console.log("Res: ");
      console.log(res)
   })
   .catch(err => console.log(err));

请帮我。谢谢！！！