Access-Control-Allow-Origin

[olaferlandsen]

Hi Adriano,
This "work" but with this error:

Failed to load https://maps.googleapis.com/maps/api/place/autocomplete/json?input=gooogle&key=xxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

Have you idea if it still work?

[souzadriano]

Hi @olaferlandsen,

This is a CORS problem in development.

In development I use the chrome extension Allow-Control-Allow-Origin: * and configure maps.googleapis.com in the URL patterns.

[olaferlandsen]

I know it, but why you don't use jsonp???

[souzadriano]

Thanks @olaferlandsen, I will search and try change to jsonp if better.

[acittar]

Hi Adriano,

I installed the chrome extension but I get the same error. How did you configured it?

Thanks,
Alessandro

[souzadriano]

Hi @acittar,

Try this:

[ishan123456789]

Not able to solve it using the plugin.Please suggest a fix or way through.

[souzadriano]

Hi @ishan123456789

With below configs works for me:

What Ionic version you use?

[ishan123456789]

`cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.2
Cordova Platforms  : android 6.4.0
Ionic Framework    : ionic-angular 3.9.2

System:

ios-sim : 6.1.2
Node    : v8.9.4
npm     : 5.6.0
OS      : OS X Yosemite
Xcode   : Xcode 7.2 Build version 7C68

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro`

[ishan123456789]

I solved the issue by adding another extension ie.

https://chrome.google.com/webstore/detail/cors-goggle/jioikioepegflmdnbocfhgmpmopmjkim/related?hl=en

The one you referred did not help

[acittar]

Guys,

with the chrome extension Allow-Control-Allow-Origin: * configured as Adriano said, I just have to disable and re-enable it when I open my app in a new tab

Thanks,
Alessandro

[acittar]

Hi Adriano,

sorry, I still have this problem in my production environment. Do you have any idea about how can I fix it?

Thanks,
Alessandro

[ishan123456789]

This shouldn't be an issue on mobile app. As CORS issue is not relevant to mobile apps

[acittar]

Sure, but what if a user accesses my app via browser?

[acittar]

Hi Adriano,

do you have any news on this? The plugin works perfectly for Android/iOS app (I didn't try but I think so), but it doesn't work at all for PWA. I deployed my PWA on heroku and it doesn't work if my chrome plugin is disabled.

Thanks a lot,
Alessandro

[souzadriano]

Hi @acittar ,

I don't use as PWA.

I think that is a server configuration.

How is your server configured?

You can try this:
https://devdactic.com/deploy-ionic-website-heroku/
with CORS configurations.

[acittar]

Hi Adriano,

Tried a lot of configurations to allow CORS but without success. Are you going to switch to jsonp in the next future? It should solve the issue even in local env.

Thanks,
Alessandro

[neharuparel]

I am still getting the CORS issue in production mode also in my ionic application.
Has anyone solved the issue and how please let me know.