Play Framework CORS Headers

Question

I\'m trying to set CORS Headers for my play framework app. Specifically I\'m getting this error

cannot load http://127.0.0.1:9000/. No \'Access-Control-Allow         


        

Answer 1

I would not recommend writing/using any code to enable CORS which is basically a framework feature and only needs configuration.

The stuff you copied from the documentation is correct:

• cors.conf where you modify the play.filters.cors settings. But you seem to have misconfigured something, e.g. the allowedOrigin = * should be configured as null in the config. (Have a look at the documentation page and the linked reference.conf)

# The allowed origins. If null, all origins are allowed. play.filters.cors.allowedOrigins = null

• You have correctly enabled the CORSFilter in your Filters.scala
• Now test your configuration with a correct cURL CORS request:

curl -H "Origin: http://example.com" \ -H "Access-Control-Request-Method: GET" \ -H "Access-Control-Request-Headers: X-Requested-With" \ -X OPTIONS --verbose \ http://localhost:9000/

Answer 2

for me it worked after one day (maybe cash or other things)

application.conf:

play.http.filters = "filters.Filters"

play.filters.cors {
  # allow all paths
  pathPrefixes = ["/"]
 # allow all origins (You can specify if you want)
 allowedOrigins = null
 allowedHttpMethods = ["GET", "POST"]
 # allow all headers
 allowedHttpHeaders = null
}  

build.sbt :

val appDependencies = Seq(
filters,
....
)

in package filters.Filter :

package filters;

import javax.inject.Inject;
import play.mvc.EssentialFilter;
import play.filters.cors.CORSFilter;
import play.http.DefaultHttpFilters;

public class Filters extends DefaultHttpFilters {

CORSFilter corsFilter;

@Inject
public Filters(CORSFilter corsFilter) {
    super(corsFilter);
    this.corsFilter = corsFilter;
   }

public EssentialFilter[] filters() {
    return new EssentialFilter[] { corsFilter.asJava() };
}
}

and in my ajax call:

$.ajax({
    method:'GET',
    url: xxxxxxxx',
    dataType: 'json',
    headers: {'url': yyyyy,
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT',
    'Access-Control-Allow-Headers': 'Content-Type'
    },
    success: function(data) { 
....}); 

i have no more error, in prod and in local environment !! thank you all

Answer 3

Play filters are enticing, but when they do not work as expected, as you noticed, the magic is not that easy to track down.

I prefer to use something like this:

implicit class RichResult (result: Result) {
  def enableCors =  result.withHeaders(
    "Access-Control-Allow-Origin" -> "*"
    , "Access-Control-Allow-Methods" -> "OPTIONS, GET, POST, PUT, DELETE, HEAD"   // OPTIONS for pre-flight
    , "Access-Control-Allow-Headers" -> "Accept, Content-Type, Origin, X-Json, X-Prototype-Version, X-Requested-With" //, "X-My-NonStd-Option"
    , "Access-Control-Allow-Credentials" -> "true"
  )
}

Then you can easily invoke it in your response like this:

Ok(Json.obj("ok" -> "1")).enableCors

It's easy to understand, can be placed only where you want to enable CORS, and very easy to debug!