No 'Access-Control-Allow-Origin' header is present on the requested resource while accessing php rest api

ionic-v1
1

Hi All,

I am working on a old project.
Current system details are bellow.

node version : 5.0
npm bersion : 3.3.6
cordova version : 7.1
ionic -v : 1.4.0

I am getting http service issue with php rest api.
in php i have already added bellow code in on the top of the rest api file.

header(“Access-Control-Allow-Origin: *”);
header(“Content-Type: application/json; charset=UTF-8”);
header(“Access-Control-Allow-Methods: POST,GET”);
header(“Access-Control-Max-Age: 3600”);
header(“Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With”);

But still getting belle message in chrome console.

ionic.bundle.js:19346 GET http://www.example.com/login/app_scripts/user_login.php?userid=userid&pass=123456789 501 (Not Implemented)

:8100/#/login:1 Failed to load http://www.example.com/login/app_scripts/user_login.php?userid=userid&pass=123456789: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://192.168.2.149:8100’ is therefore not allowed access. The response had HTTP status code 501.

I need your help very badly… i have already spend last two days but nothing got any solution.

2

Are you running in ionic-lab? There should be no issue when running on real-device.

If running on ionic-lab, what browser that you used?

Please implement disable web-security when running on browser as below in command-prompt/terminal. Below command is used for Google Chrome.

open -n -a /Applications/Google\ Chrome.app --args --user-data-dir="/tmp/someFolderName" --disable-web-security

3

hello @judhisahoo2009

behind this error the main reason is CORS, CORS is not enable from your rest API.
this will work perfectly without any changes in real device but not support in browser.
to run this in development mode (browser) you have to disable browser security (CHROME) by following these steps given bellow.

1 - create Folder in your drive FolderName = chrome
2 - right click on chrome shortcut on desktop
3 - open properties
4 - go to Shortcut > Targate
5 - put this line after the existing line –disable-web-security --user-data-dir="E:\chrome"
6 - now you can access your restAPI from this desktop chrome shortcut.

if you have Mac (safari)

open safari > go to Developer option > check Disable Cross-Origin Restrictions.

4

Hi, @spanchal,

Do those need for run in real device with -livereload command ?

i am using reald device with bellow command from windows command pompt.

“ionic run android -l”

then frmm google “chrome://inspect/#devices” clicking inspect … then getting issues detals from console.

ionic.bundle.js:19346 GET http://www.example.com/login/app_scripts/user_login.php?userid=userid&pass=123456789 501 (Not Implemented)

:8100/#/login:1 Failed to load http://www.example.com/login/app_scripts/user_login.php?userid=userid&pass=123456789: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://192.168.2.149:8100’ is therefore not allowed access. The response had HTTP status code 501.

plz help me if any.

5

Hi @jeffreytck Do those need for run in real device with -livereload command ?

i am using reald device with bellow command from windows command pompt.

“ionic run android -l”

then frmm google “chrome://inspect/#devices” clicking inspect … then getting issues detals from console.
ionic.bundle.js:19346 GET http://www.example.com/login/app_scripts/user_login.php?userid=userid&pass=123456789 501 (Not Implemented)

:8100/#/login:1 Failed to load http://www.example.com/login/app_scripts/user_login.php?userid=userid&pass=123456789: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://192.168.2.149:8100’ is therefore not allowed access. The response had HTTP status code 501.
plz help me if any.

6

Hi All,

Just test the http service part in plucker… it is working fine as bellow.

.controller(‘DashCtrl’, function($scope, $http) {
$http.get(“http://www.exampe.com/login/app_scripts/user_login.php?userid=kautilya&pass=485810”).then(function(response) {
console.log("srvice response : ", response);

});
})

getting proper response from plunker…

Thinking some thing issue in system settings…

I am fresher in ionic… please help me.

7

Hi All,

I have seen my code is runing fine with android 6.0+ but getting above error with bellow version 6.0.

Can any one help me any solution for 6.0 version.

thanks…