0

I'm developing a web application with an AngularJS frontend and a Rails backend.

My goal is to keep the two entirely separate, since the Rails app will ultimately be relegated to a simple REST server, and the AngularJS frontend will be just one of a few different clients that use the backend. For that reason, I don't want to integrate the frontend into the Rails asset pipeline, or similar.

The Rails app is running locally on port 3000. The frontend uses Gulp to compile static assets, and BrowserSync, which contains a development server that I'm running on port 3001.

For development purposes, how can I get the AngularJS app to talk to the Rails server, avoiding this browser error (which I'd expected) when making HTTP request via Angular's $http service?

No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3001' is therefore not allowed access.

Do I just need to set up CORS in the Rails app? Is there another way - maybe some sort of local hosts file trick (I'm on a Mac, FWIW) or similar? I ask because my coworker is responsible for the Rails app (I have limited experience with Rails) but is out of town for a while; my knowledge is mostly limited to the AngularJS stack that I've set up.

I've searched and read up for about an hour, but haven't yet been able to find anything that I can grok that is applicable to my situation. I might not be aware of the best search terms.

Thanks for any help!

Bungle
  • 19,392
  • 24
  • 79
  • 106
  • One easy way would be to serve your Angular app's index.html statically from the same domain/port, i.e. `http://localhost:3000` – New Dev Dec 28 '14 at 08:31
  • Thanks @NewDev - but I'm not sure if that's possible? Please see http://stackoverflow.com/questions/1694144/can-two-applications-listen-to-the-same-port. I tried configuring BrowserSync to use port 3000, but it appears to be smart in realizing that the port is occupied (by the Rails app), and it automatically moves up to the next available port, 3001. Please let me know if you're aware of a way to do it that I'm missing. – Bungle Dec 28 '14 at 17:51
  • What I meant was to serve this as a static file from the Rails app - (2) in the answer below. – New Dev Dec 28 '14 at 18:23

1 Answers1

1

Ah, wonderful. Here are a few solutions:

  1. set up CORS, which shouldn't be too hard. All you have to do is add the headers to pages serving your static content (not the rails REST endpoints), The problem with this is you shouldn't really be doing it unless you have a good reason (so see 3). How are you serving the static content? There should be plugins to do the headers for you if it's a popular tool
  2. serve the angularJS pages from the rails backend for now (using some kind of static route)
  3. if you're thinking about production and want to sort this out for good, use nginx to proxy the two services into one single domain, http://nginx.org/en/docs/beginners_guide.html
Peter Ashwell
  • 4,292
  • 2
  • 18
  • 22
  • Thanks for your help, Peter! I went with your third suggestion, but kept it local for now (though I expect we'll eventually use a similar approach for production). It's mostly working, but with a few hiccups that may or may not be nginx-related. I started a separate question about those - would appreciate your input there, if you have time. http://stackoverflow.com/questions/27713016/how-to-make-browsersync-work-with-an-nginx-proxy-server – Bungle Dec 30 '14 at 21:47