0

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!

2 Answers 2

1

Setting up CORS in play consists of two steps

  1. Respond to preflight requests (option requests)
  2. Setting headers for response.

Seems you miss the first step, check this article for details.

0

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!

1
  • You may want to accept my answer if it helps you out. Then others who meet with the similar issue can know how to debug into their own code logic. Thanks :)
    – Rebornix
    Feb 3, 2015 at 2:57

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.