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
Related
I have read numerous questions with a similar trouble but they usually were caused by a server misconfiguration. I use unpkg.com service so I assume it is configured correctly.
My HTML5 static page contains:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css">
My app is written in Vue but that code is still present in generated file.
Chrome shows the following warnings:
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://unpkg.com/bootstrap/dist/css/bootstrap.min.css".
Here is the response caught by Network tab in Developer tools. Content type is text/plain
And the second redirected request with text/css:
When I enter this URL in Chrome location bar, I receive 302 status code first having the text/plain mime type first and the second fetch is expected text/css.
Is this sort of Chrome bug that it complains about the content type of request to be redirected? Or is it unpkg.com error? Is there a way to get rid off these errors (I can bundle the file in my Vue app but I want to minimize the transfers).
You can try it live here: https://beta.mezinamiridici.cz/ankety/jizda-v-tesnem-zavesu-za-kamionem
I am trying to figure out that why my sub domain website works fine with Http but not when its https.
Is there SSL certification problem.
You have a bunch of scripts that are linking with http. Browsers won't run these on a secure page. You need to change the links to https:
<script src="http://bloodsuvidha.vampy.in/js/bootstrap.min.js" type="text/javascript"></script>
This is also true with stylesheets:
<link rel="stylesheet" type="text/css" href="http://bloodsuvidha.vampy.in/css/bootstrap.min.css">
The answers given till now are correct but none solved my problem.
The main problem was my application was behind CloudFlare
Laravel detects a Request as secure or insecure by checking a HTTP header i.e.
$_SERVER['REQUEST_SCHEME']
which remains HTTP even the Request is HTTPS due to cloudflare.
CloudFlare sets a different header for the same i.e.
$_SERVER['HTTP_X_FORWARDED_PROTO']
Which must be checked to detect a request is secure or not
Following this article and making some changes to this I successfully managed to generate HTTPS URL without making any changes to previous application code.
Credit Cybersupernova (Stack User )
I have been trying to get my HTML5 offline cache manifest to work nicely in Safari when accessing the site with HTTPS.
I have the following setup:
index.html:
<!doctype html>
<html lang="en" dir="ltr" manifest="app.appcache">
<head>
<base href="https://www.example.com">
<link rel="stylesheet" href="//some.cdn.com/styles.css" charset="utf-8">
<script src="//some.cdn.com/app.js"></script>
</head>
<body>
</body>
</html>
app.appcache
CACHE MANIFEST
//some.cdn.com/styles.css
//some.cdn.com/app.js
NETWORK:
*
Accessing my site over HTTP works fine! Assets get loaded correctly and cached; I can use my app offline
Accessing my site over HTTPS in Chrome works fine as well
Accessing my site over HTTPS in Safari breaks :-( Assets get loaded normally, but won't cache. Debugging didn't got me any further. No useful information in the logs
According to the specs, referring to another domain in the cache manifest is allowed.
I have also tried using http:// or https:// explicitly in my HTML and manifest instead of the //-notation. Of no avail.
In my search online I've found some comments about cross-domain requests and that it isn't allowed in the cache manifest, but according to the W3C specs this is allowed (and proved by the fact that the browsers I tested it cache all the assets correctly, except for the combination https & safari.
So apparently I missed an important restriction of the appcache.
As mentioned in https://www.w3.org/TR/2011/WD-html5-20110525/offline.html:
If the manifest's is https: or another scheme intended for encrypted data transfer, then all URLs in explicit sections must have the same origin as the manifest itself.
I am trying to use a custom font on my website that I have uploaded in a google drive. The reason I have to take this route is, the particular site is blogger which does not allow me to upload custom font. I have read articles where they had suggested to use pro version of dropbox, but at this moment I am not planning to invest in a pro account. The Code I am trying to use as follows
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: keycapsflf1-webfont;
src: url(https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download);
}
#font-face {
font-family: keycapsflf1-webfont;
src: url(https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download);
font-weight: bold;
}
div {
font-family: keycapsflf1-webfont;
}
</style>
</head>
<body>
<div>Testing</div>
</body>
</html>
But, this does not work. Any idea, what might be wrong?
Its not working because docs.google.com is sending a No 'Access-Control-Allow-Origin' header on the resource.
Here is the error from the console:
"Redirect at origin 'https://docs.google.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 'null' is therefore not allowed access."
I tried removing the &export=download param on the url https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download but this didn't work either so its definitely the resource sharing policy at fault.
edit based on Spencer Wieczorek's feedback
After disabling same origin policy in my chrome as follows the font loaded correctly confirming that the Cross-Origin Resource Sharing policy is the only issue that I'm facing with loading the font: Disable same origin policy in Chrome
See screenshot below:
You can upload custom font to your blog via google sites.
First create a new site by using Google account at http://sites.google.com.
Then create a directory name as "fonts" or whatever you want to choose.
Upload the font and then you will get the url of the font which you upload.
Add the font css source url to blogger header
Eg:
#font-face {
font-family: keycapsflf1-webfont;
src: url(https://sites.google.com/site/yoursitename/fonts/fontname.ttf);
}
We are developing a cross platform app and facing issues at the uses of iFrame only.
Page in iFrame is not loading properly and having issues while scrolling, after some time app is crashing.
But app is working fine on android.
Is there any issues related to or specific to the uses of iFrame on iOS?
Code we are using:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 , minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
</head>
<body>
Test Page
<iframe src="http://www.devicepixelratio.com/" style="height: 400px;"></iframe>
</body>
</html>
Getting error:
Error Domain=NSURLErrorDomain Code=-999 "The operation couldn’t be completed. (NSURLErrorDomain error -999.)" UserInfo=0x18474b30 {NSErrorFailingURLKey=requested_URL, NSErrorFailingURLStringKey=requested_URL}
When I open the website www.devicepixelratio.com in Safari on my Mac and I got the following error message in the debug console:
Blocked a frame with origin "http://googleads.g.doubleclick.net" from accessing a frame with origin "http://www.devicepixelratio.com". Protocols, domains, and ports must match.
This error occurs 9 times every time I load the page. It appears to be an issue with cross domain scripting, which is most likely throwing an error in the UIWebView and causing the crash. I'm not sure what server type you're using, so I won't attempt to help you with the CORS setup, but here's a link to another Stack Overflow question with many answers that may help:
Javascript errors from Google Adsense