Working with grunt serve and apache to prevent crossdomain error - apache

Question

Okay, I've been struggling on development because of this cross domain restriction on my php-angular application development.
I am using yeoman to scaffold my application thus it has a grunt task of server which opens an http server at port 9001
Now I have created a REST-like api in php as my backend to provide service to my angularjs application.
During development I always create a dummy data in instead of using that api I made because I cannot make those two separate things together, then after I am finish building the front end, I will build it and copy to the folder of the api, so I can now test it to work together, which is really not so efficient and fast for development.
Now I came across this article
That taught how to make those two work together, but I think I failed to understand and failed to do it properly.
Here is my configuration for a site-available in apache.
<VirtualHost *:80>
ServerName foo.dev
ServerALias www.foo.dev
DocumentRoot /var/www/html/foo
ProxyPass /api/ http://foo.dev/api/ retry=0 timeout=30
ProxyPass / http://localhost:9001/ retry=0 timeout=30
<Directory "/var/www/html/foo">
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
What happens now, is that http://foo.dev now works, just like what I see in localhost:9001, but it cannot access http://foo.dev/api
What is wrong in my setup. Thanks!

Answer 1

If you backend has created with PHP, you will need create a .htaccess file in the root directory of you PHP.
Set this:
<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type"
</ifModule>