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

Hy all friends actually I am facing this error

Access to fetch at ‘’ 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 (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???

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)

CORS extension not working in http link

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

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

1 Like