6

How do I set CORS on requests for fonts files (or any other static resource) on the built in ember-cli server?

This is the error message just for reference:

Font from origin 'http://some-domain:4200' 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://localhost:61277' is therefore not allowed access.
Kalman
  • 7,597
  • 1
  • 22
  • 42
leojh
  • 5,542
  • 4
  • 24
  • 30
  • If I can elaborate you can avoid CORS and extra preflight requests simply by using a CSP that allows cross origin requests for your application in the first place. – Andrew Hacking Jan 12 '15 at 22:27
  • @AndrewHacking frankly, this is my first time having to manipulate a CSP. On top of that, I am also embedding my ember app inside of an already existing one which makes things more complicated. Let me look into it some more. – leojh Jan 12 '15 at 22:28
  • I've only had to use CORS when I couldn't set policy via CSP, which is why I focused on that since you said you're using Ember CLI to serve your app. – Andrew Hacking Jan 12 '15 at 22:55

2 Answers2

5

Add the following to ENV in config/environment.js:

module.exports = function(environment) {
    contentSecurityPolicyHeader: 'Content-Security-Policy',
    contentSecurityPolicy: {
      // ... other stuff here
      'font-src': "'self' http://some-domain:4200",
    },
}
Andrew Hacking
  • 6,058
  • 29
  • 36
  • In addition to the above,I believe you also need to set the CORS headers as mentioned by munsellj – Akshay Rawat Feb 24 '16 at 10:55
  • @Akshay Rawat, the non origin server (ie not the ember CLI server) will need to have a CORS header to allow the browser to accept responses from the server. Those other servers will need to nominate origins (or specify a wildcard). The ember CLI server won't typically be serving clients from other origins so doesn't normally use CORs headers and just sets CSP headers for the browser client being developed. The CSP headers are a whitelist to permit the browser to access non origin sites as a best practice for production. CSP and CORs work from different sides of the problem. – Andrew Hacking Feb 25 '16 at 13:03
1

I tried adding the CSP settings but it was unsuccessful for me. I still got CORS errors for font files being referenced from my Ember app's CSS. In another post I saw someone mention ember-cli-cors which I tried and seemed to solve the issue for me. It just adds CORS headers allowing requests from everywhere to all resources which is exactly what I needed to get all resources to load properly in my local dev environment serving the Ember app assets using ember-cli's built in ember serve command to another local development server running a Python app serving my index.html from Redis(ember-cli-deploy style).

munsellj
  • 1,537
  • 13
  • 22