从AngularJS APP访问Google Calendar API

Question

I am implementing (I am trying to implement) a 100% client side AngularJS web app which should access the google calendar API. Of course, this doesn't work because I hit the cross domain problem:

XMLHttpRequest cannot load http://... . Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin.

Is there any solution to bypass this issue, except creating a proxy? By setting some header or changing some google configuration? I don't see one ...

Answer 1

Great hint Philipp! The google javascript api client ( see here ) does the job.

But I am wondering: How does the google javascript api client bypasses the cross domain issue? Does someone know?

Answer 2

You need googles side to return the right headers, Access-Control-Allow-Origin, to your browser so it doesnt complain about the cross browser issue.

Make sure in the google cloud console is configured correctly to web application. Im assuming web app because the redirect though.

If its a phoneapp or not serving anything on localhost:9000 redirect endpoint there are other options. For example you could open up the oauth redirect in another window, still use localhost:9000 as the redirect. Even though you are not listening at that port you could still grab the url code or error that is set on the redirect from the parent window.

Answer 3

CORS is an issue that you will experience when running the app through web browsers. I suggest you download a CORS toggle extension on google chrome so you can toggle off CORS and the API will connect. Good luck!