CODEWITHSUNDEEP
angularjsgruntjsyeoman
Dream4ge
Dream4ge

Reputation: 141

Yeoman with grunt-connect-proxy returns a ECONNREFUSED error

I'm trying to add grunt-connect-proxy to a project that uses the latest yeoman + angular generator.

But, when hitting the road that should be forwarded (e.g. 127.0.0.1:9000/api/v1), the server returns this error:

An error has occurred: {"code":"ECONNREFUSED","errno":"ECONNREFUSED","syscall":"connect"}

I used a modified Gruntfile: same as here as recommended.

How I'm a supposed to debug this? Has anyone had a similar issue lately with grunt-connect-proxy?

I'm also interested in similar solutions for proxing api calls for an angular webapp, if you have any that actually work.

Thank you for helping me out! Much appreciated!

Upvotes: 3

Views: 4627

Answers (3)

Bueno
Bueno

Reputation: 1950

I was running into this issue while trying to develop locally using AngularJS with a Laravel backend.

I was able to get the grunt-conenct-proxy example working using the before mentioned Rails example: Working with Angular.js and Rails, however when trying to connect locally to my laravel backend I would always get the ECONNREFUSED error.

The only real difference I could see was that the rails server was spinning up on 0.0.0.0. where as my apache server was running on localhost/127.0.0.1. After changing my config for my apache sever to run at 0.0.0.0 using:

php artisan serve --host 0.0.0.0

I was the able to connect to my backed without issue. If anyone could comment and explain how/why this works I would be very grateful.

Upvotes: 2

Dream4ge
Dream4ge

Reputation: 141

Well, I finally got it to work somehow. But frankly, I don't get it. It was definitely related to localhost not being the same as 127.0.0.1. How did it ended that way, I don't have a clue...

I'll share what I learned while doing this, as I found no real answer for debugging this staff out there on the web. Here is what I learned:

  • grunt has a --verbose option that may help you see what's going on

If grunt-connect-proxy is configured correctly you must see something like this at startup:

Running "configureProxies" task
Proxy created for: /api/v1 to localhost:8000

In my case, the grunt server was running on 127.0.0.1:9000, the second server on localhost:8000. I proxied requests made on api/v1 so grunt server --verbose would output something like this on every proxied request:

Proxied request: /api/v1/test -> http://localhost:8000/api/v1/test
{
    "host": "127.0.0.1:9000",
    "connection": "keep-alive",
    "accept": "...",
    "user-agent": "...",
    "accept-encoding": "...",
    "accept-language": "...",
    "cookie": "..."
}
  • the whole point of using a proxy is to avoid any unnecessary CORS configuration on your second server

This is because once deployed your frontend and backend code will coexist on the same server (= the grunt server is only needed at dev time). I wanted to stress that point, because @Ulugbek answer may suggest that you need CORS to make grunt-connect-proxy work.

  • the ECONNREFUSED error happens when your second server is not responding

In my case, I discovered that http://127.0.0.1:8000/api/v1/test was not responding even if http://localhost:8000/api/v1/test was. So, I messed around with the /etc/hosts a bit and solved the problem by making sure both endpoints were responding accordingly.

The same error may happen to you if the second server is not listening to the proxied endpoint.

Upvotes: 1

Ulugbek
Ulugbek

Reputation: 164

Gruntfile is fine, the error is caused by your backend, i.e. localhost:3000 (probably Rails).

If it is Rails, it's a CORS problem. You need to allow rails to accept connection from grunt server. Add 'rack-cors' to your gemfile and configure it like this in your development.rb config file:

config.middleware.use Rack::Cors do
  allow do
    origins 'localhost:9000'
    resource '*', :headers => :any, :methods => [:get, :post, :options, :delete]
  end
end

Check this link for detailed setup, it helped me to get it working.

Working with Angular.js and Rails

Upvotes: 2

Related Questions