I am getting CORS issue on mobile devices as well as browser in Ionic 4 app. Please help
add Allow-Control-Allow-Origin extension in chrome
It allows to you request any site with ajax from any source. Adds to response ‘Allow-Control-Allow-Origin: *’ header
I have tried this but its not working. When i run command “chrome.exe --user-data-dir=“C:/Chrome dev session” --disable-web-security”. Its working on my PC. But when i build an APK and install it on my mobile phone. there also I am getting CORS issue . Please help
Use chrome Remote debug, to check error in mobile.
and are using PHP or something else in the backend?
this is error while remote debug
Access to XMLHttpRequest at ‘http://192.168.0.23/appservices/rest/web/index.php/v1/products/get-categories’ from origin ‘http://localhost’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.
For This issue you need to have configure from your server side as well…don’t go with chrome extension you can not ask your user to add the extension to use your app.
You can either create a proxy server or ask your back end people to allow access to the origin.
This CORS handling link might help you.
I have similar issue, in my php file i left space after and before php tag. So i remove that space and everything working fine.
Issue is still there. I am using Yii2 as backed
-if you developing a mobile app use ionic native HTTP plugin.
-otherwise, implement cors policy on serverside
@sourabhchopade03 I faced the same issue,I added this three line head of the php file it solve you can try.
In developing ionic app, I am using ngrok.
I will show you comprehensive explanation how to build developing environment avoiding CORS issues.
1: Sign up ngrok, and install ngrok tools
https://ngrok.com/
2: Make a ngrok config file “ngrok.yml” like below in your ngrok path (~/.ngrok/ngrok.yml)
authtoken: YOURNGROKAUTHTOKEN
region: YOURREGION
tunnels:
yourionicapp:
proto: http
addr: 8100
host_header: rewrite
yourapi:
proto: http
addr: 80
3: Run ionic serve
ionic serve -- --disable-host-check
4: Run ngrok
ngrok start yourionicapp
ngrok start yourapi
After running ngrok, You can see ngrok status below.
You must copy your forwarding https url “https://yourngrokurl.yourregion.ngrok.io” to your server config later.
Session Status online
Account YOURACCOUNT (Plan: yourplan)
Update update available (version 2.3.25, Ctrl-U to update
Version 2.2.8
Region YourRegion
Web Interface http://127.0.0.1:4040
Forwarding http://yourngrokurl.yourregion.ngrok.io -> localhost:8100
Forwarding https://yourngrokurl.yourregion.ngrok.io -> localhost:8100
5: Edit server config (nginx: nginx.conf, or sites-availables/yourserverconfig)
Add Access-Control-Allow settings to your server configs.
location / {
add_header Access-Control-Allow-Origin 'https://yourngrokurl.yourregion.ngrok.io';
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE';
add_header Access-Control-Allow-Headers 'Origin, Authorization, Accept, Content-Type';
add_header Access-Control-Max-Age 3600;
location ~ \.php {
more_set_headers "Access-Control-Allow-Origin https://yourngrokurl.yourregion.ngrok.io";
more_set_headers "Access-Control-Allow-Credentials true";
more_set_headers "Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS";
more_set_headers "Access-Control-Allow-Headers Keep-Alive, User-Agent, If-Modified-Since, Cache-Control, Origin, Authorization, Accept, Content-Type";
more_set_headers "Access-Control-Max-Age 1728000";
6: Restart your server(nginx)
nginx -s reload
CORS problems had been terrible pain for me.
I hope you guys free from CORS issues.
add access-control-allow-origin header on the server
As others have said from server side: https://enable-cors.org/
This issue is from server, your API’s are not accessible from all IP address, ask your API team to enable cors origins on the headers.
Hope this will help