0

I am trying to serve webfonts to my website using a CDN (MaxCDN) but am getting the following browser error. Website is hosted on Heroku using Play Framework 1.2.7.2:

Font from origin 'https://______.netdna-ssl.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://______.herokuapp.com' is therefore not allowed access.

MaxCDN pointed me to this article but is only relevant for Apache server. Any suggestions on how to fix this for Play Framework 1.2.7.2.

https://www.maxcdn.com/one/tutorial/how-to-use-cdn-with-webfonts/

I can find an article explaining how to resolve the issue for Play 2.x here (https://www.playframework.com/documentation/2.4.x/CorsFilter) but not for Play 1.x.

HelpMeStackOverflowMyOnlyHope
  • 4,852
  • 10
  • 32
  • 49

1 Answers1

1

The problem is not related to your Play Framework server but to the CDN one.

You are trying to perform a request from one origin to another (CORs request) : from the page at 'http://______.herokuapp.com' to the CDN at 'https://______.netdna-ssl.com'

When performing this request, the CDN server must add the 'Access-Control-Allow-Origin' header in the response, otherwise it will be blocked by the browser for security reasons.

If you want more informations about CORS you can check this SO answer.

If you have access to the CDN you can add the rules to add the header, otherwise I suggest that you host the font yourself.

Update :

I don't know if it is possible to add headers to requests made to the public folder, but one solution would be to create a dedicated Font controller. This controller would be used to get the font with the appropriate header.

public class Fontextends Controller{

  public static void font(String fontName){
    response.accessControl("*");     //we add the Access-Control-Allow-Origin header to the response
    renderBinary(new File("public/font/"+fontName));  // we send the font in the response
  }

}

Now you need to make sure that MaxCDN is accessing your fonts from the route linked to this action.

Another solution would be to use a Front-end HTTP server like it is described here : https://www.playframework.com/documentation/1.2.5/production#anameserverFrontendHTTPservera You should be able to add the headers with this solution but I have never done it so I can't help you.

Community
  • 1
  • 1
Thomas Vuillemin
  • 134
  • 8
  • The CDN I'm using is MaxCDN and they don't have a way to edit the header according to their support team. They say that they just use whatever the header was on the origin server that they pulled from and so I need to adjust the header for the assets (fonts) there... which would imply changing a Play Framework setting. I can't find any information related to this though for Play! 1.x – HelpMeStackOverflowMyOnlyHope Feb 17 '16 at 00:23
  • Ok, so I asuume the font are originally hosted on the public folder of play ? – Thomas Vuillemin Feb 17 '16 at 13:58
  • Will try the solution and mark it correct if it works. Reading it I think it will so thank you! – HelpMeStackOverflowMyOnlyHope Feb 21 '16 at 03:22