将 await import() 与 Google API 一起使用时出现 CORS 错误

Question

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()

Answer 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 }));