The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:8100, *', but only one is allowed

Ionic Framework ionic-v3
1

Hy all friends actually I am facing this error
…

Screenshot_1
Screenshot_1.png561×531 33.4 KB

Access to fetch at ‘https://MYWEBLINK.com/wp-json/wc/v3/products/categories?consumer_key=ck_MYConsumerKey&consumer_secret=cs_MyConsumerSecretkey’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://localhost:8100, *’, but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
menu.ts:37 TypeError: Failed to fetch
at new MenuPage (menu.ts:28)
at createClass (core.js:12483)
at createDirectiveInstance (core.js:12326)
at createViewNodes (core.js:13784)
at createRootView (core.js:13673)
at callWithDebugContext (core.js:15098)
at Object.debugCreateRootView [as createRootView] (core.js:14381)
at ComponentFactory_.create (core.js:11278)
at ComponentFactoryBoundToModule.create (core.js:4030)
at NavControllerBase._viewInit (nav-controller-base.js:441)
at nav-controller-base.js:254
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.js:4760)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.js:4751)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
…
I don’t know why I am getting this error. Can anyone help me please???

2

Try to run using a device. If it works, install the CORS extension for chrome:

Note: If CORS plugin is on, some pages may not work as expected (Youtube videos will not load, for example)

3

CORS extension not working in http link

4

For anyone else that encounters this issue, it is going to be a problem on the server-side. The specifics of how to address it will vary greatly according to your circumstances, however, there is a good chance that you have 2 systems each setting the CORS headers. Alternatively, it is entirely possible that 1 system is setting both values but I see that as less probable because someone setting the * value would most likely know that means “everything” which would make the localhost domain pointless.

In my case, I have NGINX sitting in front of a Ruby on Rails application. The NGINX configuration was checking if the domain matched the Ionic domains ("^(capacitor|http|ionic)://localhost(:8100)?$") but then the Rails application was using Rack CORS middleware to add * and so the result was 2 CORS headers.

You’ll need to weigh up the various factors in your situation to decide how to solve this but, in my particular case, I restricted Nginx to only apply headers for the OPTIONS requests and let Rails take over for all other types (although I restricted the scope to only the Ionic domains).

1 Like
5

Thanks, you are right @HashNotAdam . I was solved it from the server. And welcome for your first post.

1 Like