使用带有 Nuxt js 的 axios 从 Directions API 获取数据时的跨域读取阻塞 (CORB)

Posted 2023-02-19

【中文标题】使用带有 Nuxt js 的 axios 从 Directions API 获取数据时的跨域读取阻塞 (CORB)

【英文标题】：Cross-Origin Read Blocking (CORB) when get data from Directions API using axios with Nuxt js

【发布时间】：2019-02-07 00:57:11

【问题描述】：

在我的 Nuxt 项目中，我使用 vue2-google-maps 库创建地图和 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) 阻止了 MIME 类型为 application/json 的跨域响应 https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY。详情请见https://www.chromestatus.com/feature/5629709824032768。

但是如果我使用带有 nuxt 的 Geocoding API，它可以正常工作 我尝试添加标题 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));

请帮助我。 谢谢！！！

【参考方案1】：

在 nuxt.config.js 中，您必须输入 credentials: false 以允许使用 CORS 通配符。

修改配置如下。

axios: 
   baseURL: 'https://maps.googleapis.com/maps/api',
   proxyHeaders: false,
   credentials: false

来自 Google 地图的响应中不存在 CORS 标头，因为它旨在用于服务器端应用程序。对于客户端（浏览器），您需要使用Official Maps library。 （如上图所示）。

参考：https://github.com/nuxt-community/axios-module#credentials

【讨论】：

我尝试了您的指南，例如：在我的 nuxt.config.js：模块：['@nuxtjs/axios'，]，axios： baseURL：'maps.googleapis.com/maps/api'，proxyHeaders：false，凭据: false ，但我仍然收到这些错误

@NguyễnVănĐại 查看您使用的谷歌地图 API 是服务器端 API。这就是Access-Control-Allow-Origin 标头不存在的原因。您需要使用client-side JS library

如果这解决了您的问题，请标记已验证的答案。干杯

但是为什么我在 Nuxt 中使用带有 axios 的 Geocoding API，它可以正常工作@Bharathvaj Ganesan

看起来这个 API 只在客户端即浏览器上被击中。它应该在服务于浏览器之前在服务器端被命中。