AngularJS and Phonegap Cross Origin Access

Question

Recently i created a PhoneGap App for mobile devices, using AngularJS as javascript framework.

I have a PHP backend serving Restful JSON data, build in Laravel PHP Framework.

The PhoneGap App requests data from my PHP Server with the $http service in AngularJS, and it works perfectly on my mobile phone.

Now i wanted to make my PhoneGap App available on a website temporarily instead of in an App. So i moved my PhoneGap project to a webserver, but here it doesnt work at all. I get these errors when trying to use the webapp in my own browser.

"Origin http://somewebsite.com is not allowed by Access-Control-Allow-Origin.".

I tried to add some config parameters to AngularJS such as:

delete $httpProvider.defaults.headers.common['X-Requested-With'];

But nothing seems to help.

I find it kinda weird that it worked as a PhoneGap app on my phone and in my iPhone Emulator, but it doesnt work on my new webserver domain.

Anyone know what to do?

How you managed to use webservice in phonegap without allowing access origin true? — Amit Prajapati, Aug 13 '13 at 11:52

score 3 · Accepted Answer · answered Jul 22 '13 at 09:03

3

The safest way would be to use JSONP. In laravel you would do something like:

Response::json(array('name' => 'Steve', 'state' => 'CA'))->setCallback(Input::get('callback'));

However if you just want to the access open/public, try adding this to your public/.htaccess file

Header set Access-Control-Allow-Headers: "Accept,Origin,Content-Type,X-Requested-With"
Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE,OPTIONS"
Header set Access-Control-Allow-Credentials: "true"
Header set Access-Control-Allow-Origin "*"

answered Jul 22 '13 at 09:03

Ryun

715
6
10

Thanks for your answer. Would it be safe enough to just open my REST Api to the public? Iv already created AUTH filters on all my routes in Laravel, so only authenticated users can access the API anyway. – PeterPanen Jul 22 '13 at 11:27
If you have it secured, I don't see why not. – Ryun Jul 24 '13 at 22:47

score 0 · Answer 2 · edited May 23 '17 at 12:19

0

When accessing web services from mobile website, they should either have access origin allow true set or jsonp enabled in php (much secure way). Since unlike the app, mobile website JavaScript would not have access to other domains through browsers.

check these links:

allow cross domain ajax requests

edited May 23 '17 at 12:19

Community

1
1

answered Jul 22 '13 at 08:55

Sheetal

1,368
1
9
15

AngularJS and Phonegap Cross Origin Access

2 Answers2