CODEWITHSUNDEEP
herokuplayframeworkcorsplayframework-1.x
HelpMeStackOverflowMyOnlyHope
HelpMeStackOverflowMyOnlyHope

Reputation: 5012

Play Framework 1.x webfonts CORs issue

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.

Upvotes: 0

Views: 604

Answers (1)

Thomas Vuillemin
Thomas Vuillemin

Reputation: 134

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.

Upvotes: 1

Related Questions