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

Posted

技术标签:

【中文标题】使用带有 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 只在客户端即浏览器上被击中。它应该在服务于浏览器之前在服务器端被命中。

以上是关于使用带有 Nuxt js 的 axios 从 Directions API 获取数据时的跨域读取阻塞 (CORB)的主要内容,如果未能解决你的问题,请参考以下文章

html Nuxt js使用axios从contenta公共API获取配方

如何在 Nuxt.js 的 axios 插件中访问当前的 fullPath?

nuxtjs/axios 4.4.0版本的初始化方法是啥? (nuxt.js)

Tabulator + Nuxt.js:如何在回调中使用 axios?

nuxt.js 封装axios

Nuxt/TypeScript:无法访问 - TS2339:类型上不存在属性“XXX”