使用带有Nuxt js的axios从Directions API获取数据时，跨域读取阻止（CORB）

Question

在我的Nuxt项目中，我使用vue2-google-maps库创建地图，并使用axios从Map API获取数据。 我想获取Google地图中2个位置之间的距离，所以我使用了Directions API：https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY。 当我将它用于失眠症时，我会正常检索数据，如下图所示：

但是当我使用axios将它与nuxt一起使用时，会出现类似以下错误：

  

所请求的资源上没有“ Access-Control-Allow-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。

但是，如果我将Geocoding 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));

请帮助我。 谢谢！！！

Answer 1

在import sys script, input_encoding, error = sys.argv def main(language_file, encoding, errors): line = language_file.readline() if line: print_line(line, encoding, errors) return main(language_file, encoding, errors) def print_line(line, encoding, errors): next_lang = line.strip() raw_bytes = next_lang.encode(encoding, errors=errors) cooked_string = raw_bytes.decode(encoding, errors=errors) print(raw_bytes, "<===>", cooked_string) languages = open("languages.txt", encoding="utf-8") main(languages, input_encoding, error) 中，您必须输入凭据：false以允许使用CORS通配符。

按如下所示修改配置。

nuxt.config.js

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

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