This question already has an answer here:
CORS errors from Font Awesome font in Angular app
(1 answer)
Closed 4 months ago.
I have checked what I could find about font CORS errors (like CSS - Font being blocked from Cross-Origin Resource Sharing Policy), and it seems CORS errors are result of server mis-congiguration (or missing configuration).
I develop a web application. When I test it locally with my own server, it works fine. When I try a server-less version with IntelliJ IDEA debugger, which uses its own integrated web server, I get CORS error:
Access to font at 'https://code.cdn.mozilla.net/fonts/woff/FiraSans-Bold.woff' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Is this a bug in IntelliJ, or is there something missing in my page setup?
The error can be seen when debugging following HTML:
<html>
<head>
<meta charset="UTF-8"/>
<title>Loading...</title>
<link href="https://code.cdn.mozilla.net/fonts/fira.css" rel="stylesheet"/>
<style>
h1 {
font-family: "Fira Sans", sans-serif;
}
</style>
</head>
<body>
<h1>Loading...</h1>
</body>
</html>
Maybe this can help you:
"When debugging, the x-ijt header is sent for request signing to prevent requests from outside from being rejected; header is not sent if Allow unsigned requests in Settings | Build, Execution, Deployment | Debugger is enabled, so, if you are facing issues because of this header, you have to turn this option on"
I found this answer on this page discussing CORS errors on IntelliJ IDEs
I recently added SSL to my website but it keeps giving me the error:
Mixed Content: The page at 'https://youtubehulp.nl/comingsoon/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic'. This request has been blocked; the content must be served over HTTPS.
While the link to the fontsheet is https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic
I also tried downloading the file and then loading the local version but that didn't work either.
Tried code:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="font.css">
#import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");
Also made sure all links in the font file are HTTPS
I hope someone can help me with this.
You have a simple typo in your stylesheet https://youtubehulp.nl/comingsoon/css/style.css:
#import url("https//fonts.googleapis.com/css?family=…");
^^
The : is missing after the protocol name. Therefor, it is a relative URL, and when the browser makes an absolute URL out of that using the current URL, the result naturally is https://youtubehulp.nl/comingsoon/css/https//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic
And requesting that URL makes your server issue a redirect to http://www.youtubehulp.nl/comingsoon – and that is the origin of the mixed content warning.
I have a standard page, with the following code on
<head>
<link href="http://path.to/stylsheet.css" rel="stylesheet">
</head>
However when I load the page via https and force https traffic through ReWrite conditions the stylsheet fails to load
Any Ideas?
Thank's in Advance
-C
Access your stylesheet over HTTPs as well.
<link href="https://path.to/stylsheet.css" rel="stylesheet">
All files in a site must be references as https if you intend to use it.
The syntax below allows your stylesheet to be loaded via whatever protocol your site is accessed through (assuming the stylesheet is accessible via http and https:
<link href="//path.to/stylsheet.css" rel="stylesheet" />
I am trying to include flexslider in my Angular App and getting a following error after i included the flexslider css file
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/controlpanel/users/css/style.css".
I checked to see if my file location was not correct but it is correct
Your web server is not serving the resource using the correct Content-Type in the HTTP header. Your web server should have a setting for MIME types by file extensions, but that depends what server you are using.
I've faced the same issue. Well, I was just trying to use a servlet to load welcome jsp page, which contains a .css file in header.
<head>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
And I got the same error "Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/webapp/css/style.css"
When I used developer tools in chrome, under 'Network' tab, two calls were made when hit my webapp's landing url "http://localhost:8080/webapp/"
I changed my default servlet url from "/" to "/index" in web.xml
<servlet-mapping>
<servlet-name>NextServlet</servlet-name>
<url-pattern>/index</url-pattern>
</servlet-mapping>
And then added "./" to href,
<head>
<link rel="stylesheet" type="text/css" href="./css/base.css">
</head>
It worked.
My HTML is in local system and pointing to css
<link rel="stylesheet" href="http://nagasystems.in/tamil/stylesheet/common.css" type="text/css" charset="utf-8" />
My font path folder is
http://nagasystems.in/tamil/stylesheet/
i have following fonts in it
bamini-webfont.eot
bamini-webfont.svg
bamini-webfont.ttf
bamini-webfont.woff
bamini-webfont.woff2
Now if i load the local HTML in browser the font is not loading ... Tested in all browsers.. However if html , css and font are in online it works or if all three are in local it works ..
Check below the link for all three being in online that works
http://nagasystems.in/tamil/
Kindly help me please .. Breaking my heads out for solution ...
Update : Error in chrome console "Font from origin 'nagasystems.in'; has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access"
Try Adding the following line to .htaccess file in the same folder of style sheet
Header set Access-Control-Allow-Origin "*"
It will allow the header from all locations (*)