Has anyone had any luck with testing/developing an app, that connects to an API hosted on web?
I’m trying to follow this tutorial and I can’t get it to work…
I tried to do var serviceBase = ‘http://mywebsite.com/projectfiles/api/v1/’;
rather than ‘/api/v1/’;
GET http://www.mywebsite.com/projectfiles/api/v1/login 404 (Not Found)
Is it the server settings, or something to do with my code? I have hosted services, and I have access to cPanel…
Thanks
I would use console.log to log the exact URL right before you call it, then make sure you can access that same URL in your desktop and mobile browsers.
A 404 means you’re trying to access something that isn’t there… So either you are using the wrong URL in your client, or the server is missing files at that location.
Thats the tricky part. login is not a ‘real’ file. It is being generated at “api/v1/authontication.php”…
Has anyone else had issues with CORS, .htaccess etc?
Without some more code we probably can’t help you.
Im developing a large scale app communicating with an API (cors), so its possible yes 
I’m just starting out, not sure what code would help…All the code is there in the link I posted - if you can be bothered downloading the zip file and having a look. All I changed is the index.php to index.html, and the full address of ServiceBase as stated above, to work as an ionic app which will be built for android.
I develop using ionic serve, so the url I am viewing my app on locally is http://localhost:8100/#/login
Of course in Firefox I get the following errors:
Cross-Origin
Request Blocked: The Same Origin Policy disallows reading the remote
resource at http://mywebsite.com/myproject/api/v1/login. (Reason:
CORS header ‘Access-Control-Allow-Origin’ missing).2Cross-Origin
Request Blocked: The Same Origin Policy disallows reading the remote
resource at http://mywebsite.com/myproject/api/v1/login. (Reason:
CORS request failed).
And in Chrome, when I disable security (to get past CORS) I just get: the 404 errors…
I do prefer Firefox though, Do you have any tips on getting past CORS?
Do you host the API yourself? I have a wordpress website where I create subfolders for other projects and one project is where I hold my api. Maybe that is the problem?
There is a similar question here: [SOLVED] CORS with Ionic which might help you further.
You do need to make sure you enable CORS on your server, but also have you added the domain to your whitelist within Cordova?
I would also look at proxying your api calls through ionic if you are using ionic serve, as localhost can sometimes also cause issues when developing locally.
In your ionic.project file you’ll need to add a proxies property
{
"name": "appname",
"email": "",
"app_id": "",
"proxies": [
{
"path": "/v1",
"proxyUrl": "https://api.instagram.com/v1"
}
]
}
More info here http://ionicframework.com/docs/cli/test.html
Installed whitelist plugin, added proxies, played around with CORS all day… still doesn’t work…
If my full path to my api is http://www.mywebsite.com/projectfiles/api/v1/
then do these 2 lines of the proxy look ok?:
"path": "/v1",
"proxyUrl": "http://mywebsite.com/myproject/api/v1"
in the v1 folder, I have the following:
.htaccess :
Access-Control-Allow-Origin: *
RewriteEngine On
RewriteBase /myproject/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ %{ENV:BASE}index.php [QSA,L]
authentication.php - this the file which creates the session, login “pages”
$app->get('/session', function() ...
$app->post('/login', function() use ($app) { ...
dbConnect, passwordhash files…Everything is the same exact folder and file structure as the tutorial. I just can’t seem to get this going…
Could it have anything to do with my wordpress website / server related? If I go to http://mywebsite.com/myproject/api/vi/login it comes up with my regular websites page not found - and if i go to http://mywebsite.com/myproject/api it comes up with the index file structure, where I have noticed the v1 folder is missing…
aeres, you said you are working on an app that communicates with API, is this API your own hosted one or a remote public API?
Thankyou all for your help.
The problem could be your server setup, if you can’t access it via the browser then your application won’t be able to either.
If you are using wordpress you can use their API plugin https://wordpress.org/plugins/json-rest-api/
If this is your own API, you need to make sure your htaccess files are setup correctly, you have the correct file permissions enabled and can access it within the browser outside your application.
Doesn’t look like you’ve got those steps complete yet.
Sorry, had not the time to get back at you.
To answer your question: im not responsible for the backend, and we use a .net backend anyway.
You could try
if(isset($_SERVER['HTTP_ORIGIN']) && is_string($_SERVER['HTTP_ORIGIN']))
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
in your backend because basically, while cors with ajax is not a problem in general, with a wildcard it is at least i had several issues with it and instead of using htaccess with * wildcard, i did this.
what do your developer tools say when trying to connect with your api? any console.log outputs, any network related issues which maybe lead to the core problem?
edit: wait, why index.html instead of .php ?
I got my htaccess working last night, but I removed the wildcard and switched to your code anyway, it’s working (no CORS issues anymore)
However still getting the 404 errors…Regarding the wordpress plugin, not sure if I need that. My main website, mywebsite.com is a wordpress website, but I have subfolders created for other projects, and one of them is myproject/api - does having wordpress installed on the base domain have any influence as to why this isnt working?
I am using index.html in my www folder, as this will be the basis of the app (APK)
Not sure if you can have a php file in the app?
Thankyou all for helping me through this so quickly!
You need to make sure you can access your API before you even start looking at it through the console.
The problem you are experiencing is server related not app related.
I know. I’m sure its something super simple, but I just cant figure it out. I actually deleted the htaccess file, as I suspected it was wrong and didn’t make a difference…
Still getting this sort of thing: https://a.disquscdn.com/uploads/mediaembed/images/1295/3429/original.jpg
I appreciate you are stuck on this, but this isn’t an Ionic issue, so it’s not suitable for this forum. You should post your API problem on Stack Overflow and seek assistance there.
Alternatively move this topic out of the Ionic category and into uncategorised, you should also provide all of the code related to the 404 resource. Currently it’s difficult for anyone to help you if you don’t provide the web service code. Bare in mind what I’ve said about it not being Ionic related (yet) as it’s a 404 error you are receiving.
Finally figured it out! My htaccess has the rewritebase, which is like this: /myproject/api/v1/
and so the proxy setup in ionic.project had to match (above I had just “/v1”)
"path": "/myproject/api/v1/",
"proxyUrl": "http://mywebsite.com/myproject/api/v1/"
Thankyou for all your help!
really glad you were able to solve this 
Celebrated too soon! To make it work on the phone as well as the browser (localhost) I need to change ServiceBase = 'http://mywebsite.com/myproject/api/v1/';
as the code in services.js is
obj.get = function (q) {
return $http.get(serviceBase + q).then(function (results) {
return results.data;
});
};
Seemingly OK now on both development and live app on my phone…