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

关键词：

【中文标题】使用带有 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 插件中访问当前的 fullPath？

】如何在Nuxt.js的axios插件中访问当前的fullPath？【英文标题】：HowcanIaccessthecurrentfullPathinsideofaaxiosplugininNuxt.js?【发布时间】：2020-02-0807:01:42【问题描述】：我正在尝试从Axios的Nuxt插件中获取通过route.fullPath的当前路径。它在一定... 查看详情

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

...(nuxt.js)【发布时间】：2018-04-1807:37:22【问题描述】：我想使用nuxtjs/axios模块。首先，我使用npm安装模块npminstallnuxtj 查看详情

Tabulator + Nuxt.js：如何在回调中使用 axios？

】Tabulator+Nuxt.js：如何在回调中使用axios？【英文标题】：Tabulator+Nuxt.js:Howtouseaxiosincallbacks?【发布时间】：2020-01-1608:48:53【问题描述】：我尝试在我的Nuxt.js项目中添加Tabulator。我已经完成了下一个组件：<template><divref="table... 查看详情

Nuxt：无法从 js 文件访问 vuex 存储

...件中。我需要访问该文件中的商店。在functions.js中，我想使用importstorefrom"@/store&qu 查看详情

无法在 Nuxt 组件中使用 axios 从 api 获取数据

】无法在Nuxt组件中使用axios从api获取数据【英文标题】：Can\'tgetdatafromapiwithaxiosinNuxtcomponents【发布时间】：2021-12-1502:53:48【问题描述】：<template><divid="post"><p>data</p></div></template><script>exportde 查看详情

Nuxt.js 中“$axios”的类型是啥？

】Nuxt.js中“$axios”的类型是啥？【英文标题】：Whatisthetypefor"$axios"inNuxt.js?Nuxt.js中“$axios”的类型是什么？【发布时间】：2022-01-1923:19:35【问题描述】：夏天现在我为API连接实现了RepositoryFactory模式。https://medium.com/canarias... 查看详情

NUXT.js 和 Axios 运行时如何避免代码重复？

...略有不同有哪些选项可以将代码单独放在某个地方，然后使用自定义参数将其引入我的组件中？（每个组件单独）我应该通过插件来做到这一点吗？如果 查看详情

在 Nuxt JS 中为 Axios 配置本地 php 端点

...sinNuxtJS【发布时间】：2019-12-1312:23:05【问题描述】：我想使用Axios进行指向本地PHP文件的客户端AJAX调用。为什么选择PHP？我在一个简单的基于PHP的API中有大量经过安全测试的方法，这些方法效果很好，不需要重新发明。我猜我遗... 查看详情

在 Nuxt asyncData 中使用 axios 在浏览器刷新时丢失令牌

】在NuxtasyncData中使用axios在浏览器刷新时丢失令牌【英文标题】：UsingaxiosinNuxtasyncDatalosetokenonbrowserrefresh【发布时间】：2021-06-2304:27:54【问题描述】：我在Nuxt的Axios中使用asyncData从API获取元标记，但我的问题是元描述必须设置在... 查看详情

nuxt.js封装axios

1、安装axios　　cnpminstallaxios--save 2、在plugins文件夹下面创建service.jsimportaxiosfrom‘axios‘import{Message,Notification}from‘element-ui‘axios.defaults.headers[‘X-Requested-With‘]=‘XMLHttpRequest‘axios.def 查看详情

Nuxt Axios Module 读取状态码

...执行我的电话，我可能会得到类似状态代码：202已接受。使用正文“排队”或其他一些值或状态码：200正常。带有正文“V 查看详情

Vuex Mutation 不适用于 Nuxt.js

...可能有一个非常简单的解决方法。我有两个中间件，一个使用AXIOS对github进行api调用，另一个从medium.com用户的RSS提要中提取并转换为JSON。提交存储时github突变工作正常，中等突变不提交存储 查看详情

如何使用带有 (axios/classhooks) 的 map 函数从 API 中读取

】如何使用带有(axios/classhooks)的map函数从API中读取【英文标题】：howtousemapfunctionwith(axios/classhooks)toreadfromAPI【发布时间】：2021-02-1410:12:48【问题描述】：importReact,Componentfrom"react";importaxiosfrom"axios";classVerifryextendsComponentconst 查看详情

如何使用 Axios（VueJS、Nuxt）制作 .post

】如何使用Axios（VueJS、Nuxt）制作.post【英文标题】：Howtomakea.postwithAxios(VueJS,Nuxt)【发布时间】：2020-12-0216:40:40【问题描述】：我是网络开发的新手。想问一下如何用Axios用Nuxt创建.post。我只需要一个向NodeJS应用程序发送三个输入... 查看详情

无法提交 Axios Post 表单 Nuxt.js (VueJS)

】无法提交AxiosPost表单Nuxt.js(VueJS)【英文标题】：Can\'tSubmitAxiosPostformNuxt.js(VueJS)【发布时间】：2019-06-2113:45:52【问题描述】：我正在玩我在Vue中的第一个表单。我已经用Nuxt创建了我的应用程序。我可以通过我的API的axiosget请求获... 查看详情

nuxt.js - 如何在服务器端为所有客户端缓存 axios 调用

...lients【发布时间】：2020-05-1915:45:59【问题描述】：我正在使用vue+nuxt.js应用程序，我想知道是否可以为所有客户端缓存axioswebservice调用。我必须获取一些货币参考数据，而每个客户都必须调用这些数据并没有多大意义。有人可以... 查看详情

使用 axios 的带有 vuejs 的 framework7

】使用axios的带有vuejs的framework7【英文标题】：framework7withvuejsusingaxios【发布时间】：2018-04-2305:08:32【问题描述】：我是framework7和vuejs的新手。这是导入它的正确方法吗？在此之后，我如何从其他页面引用axios？下面是我的main.js... 查看详情

使用 Nuxt.js 进行开发和生产的不同 baseURL

】使用Nuxt.js进行开发和生产的不同baseURL【英文标题】：DifferentbaseURLfordevelopmentandproductionwithNuxt.js【发布时间】：2019-06-2805:10:14【问题描述】：如何为开发和生产添加不同的baseURL？这是目前我的nuxt.config.jsmodule.exports=mode:\'universal... 查看详情