6

I've been using Yeoman 0.9 up until yesterday when I decided to use the beta 1.0 release on OS X. I use Yeoman to develop an angular app.

With the Yeoman 0.9-->1.0 migration of my app done and working, I'm now keen to extend the dev server fired up by yeoman grunt server to allow me to make cross-domain calls to an API developed by another team, hosted on another server, where they've already allowed cross-domain calls. Up to now we've been using a fake http backend courtesy of angular.js.

--An aside--

If anyone's reading this looking for a quick solution, we got cross-domain calls working by passing the --disable-web-security option to Chrome from the command line using this approach on OS X with Chrome, but it turns off security for all of Chrome (thumbs down) and we can't get Chrome to fire up as a new instance anyway.

--End aside--

Through some digging I found this Stack Overflow post (via the answer to this post) giving me a pretty good idea on what I need to do to get grunt server allowing cross-domain calls. It essentially involves adding a middleware component to connect to allow alter the headers so that "Access-Control-Allow-Origin" is set to "*" or whatever one likes.

Knowing nothing about Node.js, I can see the change alluded to in the post needs to be made somewhere in the many files created by Yeoman, but where? I've done some raw string searches for "app.configure" and "connect.listen" within the "node_modules" directory set up by Yeoman but I come up with a number of hits, most of which are from examples bundled with the modules and it isn't clear to me which I should edit. In case it helps, here's a snapshot of the directory structure for my angular app:

enter image description here

If anyone can give me some pointers on where these changes may be made I'd really appreciate it!

Community
  • 1
  • 1
  • Am I understanding this right: Your Angular app is MAKING CORS requests and the other API only receives CORS requests? – rdrey Feb 19 '13 at 07:14
  • rdrey, that's right. You think I'm on the wrong path? –  Feb 19 '13 at 08:19
  • Yeah, sorry. Here is a great readable guide on CORS: http://www.html5rocks.com/en/tutorials/cors/ Since your AngularJS app is acting as a client only, all the CORS work needs to be done by the server-side API guys. – rdrey Feb 19 '13 at 09:04
  • Thanks rdrey. As I understand it, when making a cross-domain request an OPTIONS request precedes your real request. An OK response to the OPTIONS request is needed before the real one is allowed. The server already has Access-Control-Allow-Origin="*" so I suspected something client-side. I just found out that the OPTIONS request can be skipped in angular by altering the request headers to omit "X-Requested-With" (github.com/angular/angular.js/pull/1454). I've made this change, testing a GET on http://remysharp.com/demo/cors.php, which works, but am yet to test on real server tomorrow. Thanks! –  Feb 19 '13 at 10:57
  • P.S. If my comment above solves the problem then it may very well be I was going down a flawed and confused path with wanting to mess around with the grunt server. Having said that, though, I'm still curious as to how to extend the server but this POST is probably not the right place. :=S –  Feb 19 '13 at 11:00
  • I believe that the browser does the OPTIONS request for you, if it has to. There should be no special work that you / AngularJS do to make this happen. Glad you found that request header trick. – rdrey Feb 19 '13 at 12:03
  • Thanks rdrey. Indeed the browser does the OPTIONS pre-request. The request header trick has done the job though within angular. Tested and working. Thanks for your posts. Much appreciated. –  Feb 21 '13 at 10:55
  • Coolio. I recommend answering your own question, for future angular google searches, with a link to the github issue that solved your problem. :) – rdrey Feb 21 '13 at 11:31
  • Fair enough. I had included the link to the pull request in the comment but not in the answer. Will do now. –  Feb 22 '13 at 05:23

2 Answers2

2

Solved sans messing around with node using the approach in this github pull request: http://github.com/angular/angular.js/pull/1454

1

You can use Apache proxy and connect your REST server with gruntjs(angular.js).

Apache would do this:

  • proxy / -> gruntjs
  • proxy /service -> REST server

you would use your application hitting Apache and angular.js application would think that is talking with itself so no cross domain problem.

Here is a great tutorial on how to set this up: http://alfrescoblog.com/2014/06/14/angular-js-activiti-webapp-with-activiti-rest/

user3420847
  • 220
  • 1
  • 7