How to properly separate frontend and backend? - angularjs

Question

I have a project which was built on playFramework. It has much busines logic, which involves actors, different parsers, works with three services through API, etc. Frontend is written with angularJs (single web page application). We also use coffeScript and less, and for that i added sbt plugins to compile them
I felt like it's not right to have this things altogether. Whenever i push commit to repository with changes related to css files, jenkins downloads scala dependencies, build project, etc. It's static content only for user experience.
My fronted developer gets crazy when he needs to make some changes in backend part because he doesn't know scala well enough. So he spends time in not effective way by trying to get it to work whilst i can do this for minimum time.
I think one repository should be for fronted (angular, coffee, less, images, fonts) and second one is for backend.
Today i've read few articles about that problem, got inspired, and i decided to separate them once for all :)
Firstly i installed node, npm, grunt, and http-server
Then i setup plugins for grunt: less, and coffee.
I ran 'grunt http-server' on address: localhost:8282
Launched my play application on address: localhost:9000
Then replaced old angular $resource url '/api/client' with 'localhost:9000/api/client' to check whether it works and i will see clients list on page localhost:8282. But it doesn't work. I get this in js console:
XMLHttpRequest cannot load localhost:9000/api/client. Origin localhost:8282 is not allowed by Access-Control-Allow-Origin
This is cross domain issue, so i googled and changed controller which serves /api/client
Ok(toJson(res.sortBy(_.id))).withHeaders(("Access-Control-Allow-Origin", "*"))
Headers gets applied properly, i checked this in safari. I also configured angular $httpProvider
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
But it still doesn't work.
I'm not skilled in settings up http servers but may be there is a better way? May be to set up some proxy? Or to setup nginx some how?
Any suggestions? Thanks!

Answer 1

Setting up CORS in play consists of two steps
Respond to preflight requests (option requests)
Setting headers for response.
Seems you miss the first step, check this article for details.

Answer 2

Thanks to Rebotnix
You are right, backend didn't response with needed headers.
Scala code in article is outdated a little bit (There is no PlainResult in play 2.3.6), but it explains the point of using CORS.
package controllers.filters
import play.api.mvc.{Filter, RequestHeader, Result}
import scala.concurrent.ExecutionContext.Implicits.global
import scala.concurrent.Future
object CorsFilter extends Filter {
override def apply(nextFilter: (RequestHeader) => Future[Result])(rh: RequestHeader): Future[Result] = {
nextFilter(rh).map { result =>
result.withHeaders(
"Access-Control-Allow-Origin" -> "*",
"Access-Control-Allow-Methods" -> "POST, GET, OPTIONS, PUT, DELETE"
)
}
}
}
And global settings:
import controllers.filters.CorsFilter
import play.api.mvc.WithFilters
object Global extends WithFilters(CorsFilter)
And preflight action (the same as article's one)
def preflight(url: String) = Action {
Ok.withHeaders(
"Access-Control-Allow-Origin" -> "*",
"Access-Control-Allow-Headers" -> "Origin, X-Requested-With, Content-Type, Accept, Referer, User-Agent",
"Access-Control-Allow-Methods" -> "POST, GET, PUT, DELETE, OPTIONS",
"Allow" -> "*"
)
}
and set up route for preflight:
OPTIONS /*anyUrl controllers.Application.preflight(anyUrl:String)
Now everything works!