Angular-cli: Unable to access google maps api due to CORS

[hugo-dlb]

Bug Report or Feature Request (mark with an x)

- [x ] bug report
- [ ] feature request

Versions.

@angular/cli: 1.0.4
node: 6.10.2
os: win32 x64
@angular/animations: 4.1.1
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/compiler-cli: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/platform-server: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.4

Repro steps.

const serviceURL = 'https://maps.googleapis.com/maps/api/place/textsearch/json?query=' + address + '&key=MyAPIKey'; return this._http.get(serviceURL) .map((response: Response) => response.json()) .catch(error => { console.log(error); return Observable.throw('error'); });

The log given by the failure.

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/textsearch/json?query=16%20B%20R…0%20PARIS%2020%20Ile-de-France&key=... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Desired functionality.

The header 'Access-Control-Allow-Origin' added in #2872 does not seem to work.
https://github.com/MRHarrison/angular-cli/commit/8d50a273a6a1a77da6d187281c6400cfe74d4de4

Mention any other details that might be useful.

I'm having this problem on any browser, and i have to use a Google chrome extention to get rid of it.
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
I tried changing my @angular/cli version in the devDependencies to use the version 1.0.4, but nothing changes.
I printed the serviceURL to try it in postman and in my browser and i don't have any errors, the json response from the api shows up perfectly.
You can get a free API key here if you want to try : https://developers.google.com/places/web-service/get-api-key?hl=fr

[derekkite]

https://angular.io/docs/ts/latest/guide/deployment.html#!#cors

https://developers.google.com/api-client-library/javascript/features/cors

[hugo-dlb]

Your first link says 'There isn't anything the client application can do about these errors. The server must be configured to accept the application's requests.'
And your second link says to do a basic ajax request
var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://people.googleapis.com/v1/people/me/connections?sortOrder=LAST_NAME_ASCENDING');
Which, i believe, is what is used by Angular 2 when doing http.get.
What am i doing wrong?

[Brocco]

This is a support question, not necessarily a bug with the CLI, I suggest opening a question on a site like https://stackoverflow.com/ to get some assistance.

[navjotbola]

Were you able to solve this issue?

[hugo-dlb]

I ended up using this chrome extension
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

[farazsarwar113]

Having the same issue !

[rgantla]

In my experience the plugins worked with http but not with the latest httpClient. Also, configuring the CORS respsonse headers on the server wasn't really an option. So, I created a proxy.conf.json file to act as a proxy server.

Read more about this here: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

below is my prox.conf.json file

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

I placed the proxy.conf.json file right next the the package.json file in the same directory

then I modified the start command in the package.json file like below

"start": "ng serve --proxy-config proxy.conf.json"

now, the http call from my app component is as follows

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

Lastly to run my app, I'd have to use npm start or ng serve --proxy-config proxy.conf.json

[zaarheed]

I've spent the last few days trying to find the cleanest solution for this with not much luck. Google do offer a client-side JavaScript library. But to use it, you have to hard-code a script file in index.html which I totally disagree with (think: what if the device doesn't have an internet connection, how would you handle errors?)

I also found that, Google have deprecated JSONP after moving from v2 of the API to v3 which sucks because that would have been the ideal work-around.

Instead, the only real solution I could find was to set up a super-simple NodeJS/Express backend which is configured correctly for CORS and acts as a proxy between your Ionic application and the Google API.

It was the first time I ever tried Node and it wasn't too difficult to set this up. I wrote a guide here. and also created a sample Git repo here.

[joshinator]

Still facing the same problem, one year later.
Is there a clean Angular now without this dirty solution from?
https://developers.google.com/maps/documentation/javascript/places#find_place_from_query

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}