5

I try to request the Google Timezone API from an AngularJS app.

But when I'm making my request I got this error in the preflight request :

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/timezone/json?location=48.8709,2.3561&timestamp=14912286400&key=MY_KEY. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Here is my Google API configuration : enter image description here

I've tried to disable preflight request by setting header with Content-Type: 'text/plain', but there is always a preflight request.

Do you think the error mentioned above is caused by the preflight request or do you think I should look in another direction ?

Thanks in advance

EDIT : I know how to enable CORS on my server, this is not the point. What I want is to access Google API from my AngularJS app without creating à WS on my server (if it's possible). If I don't have choice I'll do it, but in this case I know how to do it.

ANSWER : Thanks to @Sebas I solved my problem with the window.fetch() API. This doesn't work on IE, but there is a great polyfill here : https://github.com/github/fetch. I don't know if it's the best option to deal with my problem, but it works.

Tako
  • 661
  • 12
  • 34
  • hm maybe you should use the fetch api, or build a service that would execute the request on the server side – Sebas Apr 03 '17 at 14:26
  • @Sebas Yes I can make it work with a service but I want to avoid that. I tried with `fetch()`, and yes it works, but it's not supported on IE... – Tako Apr 03 '17 at 14:38
  • 1
    @Sebas I used a Polyfill for fetch to be compatible with IE and it works like a charm. Thank you :) – Tako Apr 03 '17 at 15:37

0 Answers0