(Apologies if this is daft, I'll delete if I don't make any sense.) A lot of devs are familiar with this message:
Access to Font at 'website.com/font.woff' from origin 'localhost'
has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'loclahost' is therefore not allowed access.
I am trying to retrieve resources, such as fonts, from a server http(s)://server.com/resources/1.tff. I am requesting these resources from within an iframe inside a webpage on localhost/iframepage.
I know I could launch chrome with --disable-web-security but this doesn't always work. So my plan is to create a reverse proxy on my localhost host to allow my localhost to request the resource by the method of something like this:
rp.localhost/submit/<http(s)://server.com/resources/1.tff>. But how do I set this up?
I've also tried ngrok, as well as actual local IP address, lvh.me etc, also ended up in the same result.
My localhost environment is WAMP which runs my localhost/iframepage.
Can I use Apache to do this, which is already running my app or do I need something like nginx to run a separate server locally? Any advice would be appreciated and tutorial would be awesome!
NB: The font resource is being loaded from a css file which is also inserted into the iframe. So the iframe loads the CSS, but then doesn't load the font.
I'll be configuring my Apache to follow the format of:
rp.localhost/submit/<http(s)://server.com/resources/1.tff>
But my next question is how do I make the resource URL (<http(s)://server.com/resources/1.tff>) a variable? I.e. The number or URL's is unknown and the name of the URL is also unknown until the opint of requesting the resource.
By that I mean I need to find a way to proxy things without pre-configuring the Apache server with the domain names of the resources being requested. thoughts?
I don't know if this will help but when using express framework in nodejs I had set headers for all outgoing request from node server for allowing cross domain requests using following syntax: app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Here is a link to do similar stuff in apache: https://enable-cors.org/server_apache.html
Now I wont recommend using JSONP but here is the link just if you are curious: https://www.sitepoint.com/jsonp-examples/
Hi there
I haven't played a lot with frontend stuff for a while, so my answer might be outdated, but it should work.
I used to use Charles Proxy (because it's so useful for so many debugging stuff), which has a nice feature: rewrite. (Warning, the steps I mention here are from an old version, but my license isn't valid for the latest one so I stick with this, I'm confident it still offer this feature, but the menu options might have moved or been renamed)
In the Tool -> rewrite... menu , you can enable rewrite then add a set of rules. In that set you create, you had the location in which this should apply (www.website.com in your case, to only apply this rewrite set of rules to that host), and you had a rule, like Add-Header, (or modify header, depending exactly of what is missing), and boum, you added cors headers and your browser should be happy!
Charles works on Mac and Windows. If you're on Windows, then Fiddler is free and much more powerful and let you do the same kind of rewrite (but I can't guide you there, I'm on osx and don't have such a good memory to remember all the menu names ;-)
How about just downloading all the resources your app uses and serve them all directly from localhost?
You could use ngrok to solve this. I wrote about this in my VirtualBox VM Dev guide, but you only need to read that single chapter:
Philip Davis
Software developer
You can trick your browser into thinking it's not a null origin by overriding your DNS settings. Easier than setting up a proxy.
Another way to get around this in general is to use JSONP... but highly unlikely that will work for loading fonts. (would require the font provider to support it, which they probably don't)