I have setup the Ionic development environment using Yeoman generator (https://github.com/diegonetto/generator-ionic). Everything is works well.
The problem is on Sever side request, I am getting the Cross-Origin Request Blocked error.
I add below link in .htaccess file and AngularJS app.js, still getting same error
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers: Authorization
AngularJS Provider
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.withCredentials = true;
Error Message I am getting is
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
http://192.168.1.18/tracker/user/login.
This can be fixed by moving the resource to the same domain or enabling CORS.
Screen of Request & Response Header
Please guide me any configuration need to be changed for enabling CORS. Our server side framework is Zend 1.x
The cross origin is forced by your browser, running the application from any distributed phone should not be blocked with your current settings.
To allow communication between your "served to browser" app to your server use a browser plugin
Allow-Control-Allow-Origin: * Chrome Plugin do the work
While I don't have experience using Zend with Ionic, I did experience this issue when interfacing with an IIS hosted REST API via Ionic.
For me, I had to add "Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS" server side in addition to what you already have.
After adding the 'allow methods' header, I was able to fully utilize my API.
If this doesn't get it for you, report back and I will dig a bit deeper in my project to see if I've forgotten a client side change that were also required.
I have changed the .htaccess files as below and its worked out, Google Chrome is not accepting the '*', so I specified the exact URL
Header set Access-Control-Allow-Origin "http://localhost:8100"
Header set Access-Control-Allow-Credentials: true