I'm learning about database doing a walk through to build a project. I don't have full knowledge about how the code works and I ended up having the following issue:
The project has 3 pages until now, and all use one Bulma file for the stylesheet. It is working for the first full pages, but on the third one the CSS is not loading with the page.
It appoints the following error on the browser console:
Refused to apply style from
'http://localhost:3000/checklists/stylesheets/bulma.min.css' because
its MIME type ('text/html') is not a supported stylesheet MIME type,
and strict MIME checking is enabled.
Going straight to the directory it gives:
Cannot GET /checklists/stylesheets/bulma.min.css
On the network tab it shows that X-Content-Type-Options = nosniff, and the Content-Type = text/html when it should be text/css.
Also, according to this site, it seems that the CSS file is not being found for some reason.
I've checked the link and it seems to be right and it also work properly on the other pages, and from what I understand about the subject, the rest of the code should be working as well.
<link rel="stylesheet" type="text/css" href="stylesheets/bulma.min.css" />
I checked the code and changed some stuff trying to solve, but nothing worked and I've reverted the changes.
Could someone help me to solve this issue?
You can check the files here.
For the the project it is being used:
MongoDB
Mongoose
Express
Path
EJS
Thanks in advance.
Related
I am trying to use a custom font on my client's course marketing page on Teachable.com. Right now the course is not currently live, so unfortunately I can't share a link to preview.
I am trying to follow the Google Webfonts pattern of attributes in the link tag:
<link rel="preconnect" href="https://tablocreative.com/roo/webfonts.css" crossorigin>
I am hosting this webfont and the respective font files on a different hosting provider (standard Apache hosting). When I view the source of my page, I can see that file is being referenced - no 404 errors or access origin errors in the console.
This is the CSS:
html, body, main, div, p { font-family: 'Avenir LT Pro'; }
I can see in the inspector that declaration is being applied, no other font-family is set or overriding this. But the webfont will not load.
Any insights or ideas would be appreciated!
Check out the codepen on the readme of this repo.
It has a working example:
https://github.com/adriano-tirloni/google-fonts-css2
I have deployed a React + NodeJS app in Heroku and the deployment went well and worked for a few hours. However, after a cache deletion, it now refuses to load the page. The errors are the following ones:
Refused to apply style from 'https://flix-reloaded.herokuapp.com/src.78399e21.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
and
GET https://flix-reloaded.herokuapp.com/src.78399e21.js net::ERR_ABORTED 404 (Not Found)
The first one, the MIME error refers to a minified file produced by a Parcel build. It is called in a index.html file that lives inside the dist folder. This is the line calling it:
<link rel="stylesheet" href="/src.78399e21.css">
Its twin .js file is also called within index.html:
<script src="/src.78399e21.js"></script>
Problem 1): I don' know what to do to make the CSS file accepted. within it, there are some comments imported from the SCSS original files related to each component. I tried both to remove the comments and add the type of the file as CSS but it hasn't worked. It should be a subtle detail, but I don't know what else to attempt.
Problem 2: The JS file that Heroku is not finding it is at the same folder of the index.html. However, the routing of the app has been defined to have client (Router basename="/client") as root (https://flix-reloaded.herokuapp.com/client). If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).
I tried to run another Parcel build, commiting changes, clean caches, but nothing worked. Can anyone provide me some help? I'll be happy to provide further details if necessary.
The index.html file code that lives inside the dist folder (where the production files live):
<html>
<head>
<title>myFlix</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/src.78399e21.css"></head>
<body>
<div class="app-container"></div>
<script src="/src.78399e21.js"></script>
</body>
</html>
Thanks in advance
If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).
This is because you need to make the same /client/ fix to the <script src="/src.78399e21.js"></script> line.
In both cases, you've got the wrong URL for your CSS/JS files, and as a result the CSS/JS parsers are trying (and failing) to process the resulting 404 page's HTML as CSS/JS.
I want to run a content script on an iframe with a chrome-extension:// URL. I added a line to my manifest.json that I copied out of the documentation http://code.google.com/chrome/extensions/match_patterns.html
chrome-extension://*/*
But when I reload my extension I get an alert:
Could not load extension from '/work/sirius/extension'.
Invalid value for 'content_scripts[2].matches[0]': Invalid scheme.
Any idea how to get this to worK?
No. Only ftp:, file:, http: and https: can be matched by a content script declaration.
Invalid URL patterns at any of the matches and exclude_matches fields are rejected (generating an error when trying to load the extension).
Invalid patterns at the permissions option in the manifest file are ignored.
If you want to run a script on a tab from your extension, use chrome.extension.getViews in your background script.
Even better, design your extension's pages such that they effectively communicate with each other (example).
I'm having the exact same problem, look at the API http://code.google.com/chrome/extensions/match_patterns.html it says clearly that they accept chrome-extension://*/* yet they don't.
They need to update the API so as not to confuse people.
It seems that Chrome authors have silently removed the ability for content scripts to be injected into chrome-extension: pages. Documentation still says that it works and even contains examples with chrome-extension: scheme but actually it doesn't work. So now only http:, https: and ftp: work "from the box" and file: can work if user of your extension has enabled this on Extensions (chrome://extensions/) page.
Update: now documentation referred above is updated and says nothing about ability to inject content scripts to chrome-extension: pages.
You can inject js to your iframe html(chrome-extension: pages) without declaring it in manifast.json. The injected js can visit Chrome APIs directly.
iframe.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
<script src="iframe.js"></script>
</html>
iframe.js:
console.log(chrome); // {loadTimes: ƒ, csi: ƒ, …}
I have a page where I display some audio .ogg/.mp3-files for listening in the browser (it is purchased products that are being displayed on a "receipt"-page).
The files are super in Chrome, Opera, Safari and Firefox and I can play them, pause, restart and everything.
Today I use a quick fix and forces the browser if IE to simulate IE7 version and then it works, but is of course prtty ugly-looking. I can also skip the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> and use compatibility view and get same result.
In IE10 Win7 (got latest version) this is displayed and I cannot even press the play-button: http://snag.gy/kANRy.jpg
You can have a look for yourself at: http://energyshop.se/testry.php/
Also, myclient uses an older version of IE and its the same for her.
I can also add that if Ihit f12 and switch to compatibility view of IE10 the audio WILL be working and im able to listen to them - but not as soon as I unclick compatibility view.
This is the code used for the audio (TEST code) (and heres: http://pastebin.com/ENrPj8cx a full code version of my pdt.php):
<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link rel="stylesheet" type="text/css" href='/phpstyles.css' />
</head>
<body>
<?php
echo("<audio id='testry' controls preload='auto'>");
echo("<source src='/1.mp3' />");
echo("<source src='1.mp3' />");
echo("<source src='1.mp3' />");
echo("<source src='/1.mp3' type='audio/mpeg' />");
echo("<source src='1.mp3' type='audio/mpeg' />");
echo("<source src='/1.mp3' type='audio/mp3' />");
echo("<source src='1.mp3' type='audio/mp3' />");
echo("Your browser does not support the audio tag.");
echo("</audio>");
?>
</body>
</html>
and here is my .htaccess: http://pastebin.com/2mz8QwEV
Also, here is my head, meta and doctype for the page (its a pdt.php)
<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>
<link rel="stylesheet" type="text/css" href='/phpstyles.css' />
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
I know IE9+ supports .mp3 and I have it updated so whats up? Anyone?
ive seen a very similar issue to this one before. specifically dealing with .ogg and .mp3 file types in IE9 + html5 audio.
problem was resolved by tweaking the MIME type declarations in .htaccess file while the filetypes worked in other browsers just fine - IE9 alone was very picky about what it could work with...
going to investigate further - more info soon.
I am curious what is your hosting situation? (win / linux - self hosted / shared?) i initially assumed shared linux because of the php files as this was the most common scenario.
EDIT:
depending on the hosting situation - (you own the hardware / VPS / or are using shared hosting) some people have found their windows based hosting providers web.config files are in fact overwriting their mime type declarations but i was unable to verfiy as my hosting situation is linux based
after a bit of searching i found a few other documented cases of this issue and some other solutions involved:
for shared / hosted sites, this developer converted his mp3 files to .m4a which had working mime types within IE9
additionally if you are interested this Microsoft Developer Network article - details a bit of the reason why IE9 behaves this way
this stack question is similar to your issue on an Apache Tomcat server
Please check which of this formats are supported on IE: http://textopia.org/androidsoundformats.html. You could be able to inspect with the built-in developer tools and see how it's achieved.
Here, Microsoft Offers a Guide to Using HTML5 Audio.
And here about Unlocking the power of HTML5 .
just to add for completeness, add to your audio element the attribute, type and set this as 'mp3' or 'audio/mpeg' not sure which, but at least then you know for sure the page is clearly informing the borwser the type of the resource you are linking to.
If that doesn't work there aren't other options in HTML to define such resources and I would then be looking at support from IE10 as the issue?
I think this is due to your server not sending back the correct content type for the URLs you provide.
http://energyshop.se/testry.php/1.mp3 gives content type:
Content-Type: text/html; charset=UTF-8
http://energyshop.se/1.mp3 gives content type:
Content-Type: application/octet-stream
I see that you posted your .htaccess file at Why doesn't the audio tag work in IE?
You likely have the octet-stream type set to prompt downloads. Try setting it to "audio/mpeg" instead, and only set "/1.mp3" as the source on the audio tag.
I want to run a content script on an iframe with a chrome-extension:// URL. I added a line to my manifest.json that I copied out of the documentation http://code.google.com/chrome/extensions/match_patterns.html
chrome-extension://*/*
But when I reload my extension I get an alert:
Could not load extension from '/work/sirius/extension'.
Invalid value for 'content_scripts[2].matches[0]': Invalid scheme.
Any idea how to get this to worK?
No. Only ftp:, file:, http: and https: can be matched by a content script declaration.
Invalid URL patterns at any of the matches and exclude_matches fields are rejected (generating an error when trying to load the extension).
Invalid patterns at the permissions option in the manifest file are ignored.
If you want to run a script on a tab from your extension, use chrome.extension.getViews in your background script.
Even better, design your extension's pages such that they effectively communicate with each other (example).
I'm having the exact same problem, look at the API http://code.google.com/chrome/extensions/match_patterns.html it says clearly that they accept chrome-extension://*/* yet they don't.
They need to update the API so as not to confuse people.
It seems that Chrome authors have silently removed the ability for content scripts to be injected into chrome-extension: pages. Documentation still says that it works and even contains examples with chrome-extension: scheme but actually it doesn't work. So now only http:, https: and ftp: work "from the box" and file: can work if user of your extension has enabled this on Extensions (chrome://extensions/) page.
Update: now documentation referred above is updated and says nothing about ability to inject content scripts to chrome-extension: pages.
You can inject js to your iframe html(chrome-extension: pages) without declaring it in manifast.json. The injected js can visit Chrome APIs directly.
iframe.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
<script src="iframe.js"></script>
</html>
iframe.js:
console.log(chrome); // {loadTimes: ƒ, csi: ƒ, …}