CORS error when using await import() with Google API

问题

Why I get a CORS error:

Access to script at 'https://maps.googleapis.com/maps/api/js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

When I try to import dynamically Google Maps API in my JavaScript:

  await import('https://maps.googleapis.com/maps/api/js')

But not when I do it in my HTML:

  <script defer src="https://maps.googleapis.com/maps/api/js"></script>

Any idea would be really appreciate it.

Note: if I import other URL libraries I don't have problems, ex: hammer.js cdn

async function init_map() {
  await import('https://maps.googleapis.com/maps/api/js')
}

init_map()

回答1:

I found asolution. But I am not sure if this is working everywhere.

At least it is working on current Chrome, Firefox and Edge Browser.

var url = "https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places&key=" + gkey;
$(document.head).append($('<script>', { src: url }));

来源：https://stackoverflow.com/questions/62205162/cors-error-when-using-await-import-with-google-api