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

In my Nuxt project, I use vue2-google-maps library to create map and axios to get data from Map API. I want to get distance between 2 location in google map, so i use Directions API: https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=API_KEY. When I use it with Insomnia, I retrieved data normally, like below picture:

But when i use it with nuxt using axios, I get some error like:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

跨域读取阻止（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。

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

请帮我。谢谢！！！