Ionic2 project with Apache PHP REST service on localhost

Question

I have a PHP REST service and a Ionic2 project that 'out of the box' runs on Node.js localhost:8100. The REST service runs on my computer on localhost:80. When I want to do calls from Ionic2 (Angular2) to my server on localhost I get this error in the browser console:

XMLHttpRequest cannot load http://localhost/app_dev.php/login. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8100' is therefore not allowed access. 
The response had HTTP status code 404.

Wat I understand is that this is a CORS issue (Cross origin resource sharing). As I understand A way to solve this would be to change the build script in ionic to point to a front end distribution location in my Apache project and run the whole project from localhost:80. Another solution is to change the 'Access-Control-Allow-Origin' header.

What is the most simple straight forward solution for this problem?

Please see this[http://stackoverflow.com/questions/29954037/how-to-disable-options-request] and this[http://stackoverflow.com/questions/15381105/cors-what-is-the-motivation-behind-introducing-preflight-requests] — Math10, May 22 '17 at 10:36

score 1 · Accepted Answer · edited May 22 '17 at 16:25

1

Checked the possible duplicates, and there was an potential ANSWER to which I want to add some more detail:

Since you are dealing with PHP, the following has worked for me by just adding on top of your php script the following:

<?php 

   header('Access-Control-Allow-Origin: *'); // this!
   header('Access-Control-Allow-Headers: Content-Type'); // and this!
   //more code here

?>

During development, you might very possibly need to enable CORS in your browser, here's an extension for CHROME

Hope this helps! :)

edited May 22 '17 at 16:25

Olivier de Jonge

1,252
2
13
30

answered May 22 '17 at 13:07

AJT82

60,574
21
115
147

That extension for CHROME didn't help me. – Olivier de Jonge May 22 '17 at 16:22
Are you still getting same error when setting the header in your PHP script? – AJT82 May 22 '17 at 16:23
Yes I got the same error, but I needed the header('Access-Control-Allow-Headers: Content-Type') line as well. Now it works perfect! thx! – Olivier de Jonge May 22 '17 at 16:27
For me it has always worked by just adding the first line. Hmm. But awesome that it worked out! :) Have a good day and happy coding! :) – AJT82 May 22 '17 at 16:28

Ionic2 project with Apache PHP REST service on localhost

1 Answers1