I've used PythonAnywhere before, but this is the first project that utilizes a Django back end and React front end. What is strange is that if I run this exact project on localhost, there are no troubles at all. It is only when I host this website on PythonAnywhere do I get this error.
They're probably hard to see...
Refused to apply style from 'http://bluebirdteaching.pythonanywhere.com/static/css/2.8aa5a7f8.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Looking this up, I've come across this page a lot, but I just can't seem to make sense of the answers provided there. I just don't understand why this works on localhost, but not on PythonAnywhere.
I included the above image not just to show my index.html, but also to show the project directory as that seems to be necessary as the other post linked explains. If the answer I'm looking for is in that other post, I just can't make sense of it.
Again, everything works as expected when I run the project locally. Of course, thanks guys for any help. I've been going at this problem for a while now; any help/explanations would be a huge relief.
Edit: Here is the index.html file generated when I do npm run build. This is where all those chunk.css and chunk.js are referenced.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link rel="manifest" href="/manifest.json"/>
<title>BlueBird Teaching</title>
<link href="/static/css/2.f3cffc9e.chunk.css" rel="stylesheet">
<link href="/static/css/main.aa904fbe.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],f=r[2],c=0,s=[];c<p.length;c++)a=p[c],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(i&&i(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this.webpackJsonpreactapp=this.webpackJsonpreactapp||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var f=0;f<p.length;f++)r(p[f]);var i=l;t()}([])</script>
<script src="/static/js/2.f7026f3a.chunk.js"></script>
<script src="/static/js/main.f2b0e582.chunk.js"></script>
</body>
</html>
Solution
The reason why it was working locally but not on Heroku or PythonAnywhere was just because I needed to set out mapping for static files. Literally all I needed to do this whole time was python3 manage.py collectstatic.
One of the suggestions in the SO post you linked to is that you're may not actually be serving CSS, but may be serving HTML instead. Have you loaded the css page in a browser to see what you're returning from that URL?
The reason behind why it shows mime type error is that, staticfiles_dirs doesn't include src folder, and if there is images inside src, it doesn't get include in staticfiles folder while collectstatic process, hence throws error.
so make sure to not use import images inside src or public, instead host them.
I'm working on a website that was previously hacked and thought I had cleared everything out of it, but recently it started loading extremely slow (~7 seconds) without touching anything. What makes it really weird is if I'm logged into my admin account, the site loads fine and the code below isn't injected.
After digging through a bunch of stuff, I came across this code being injected and can't track down where its coming from. Not sure if its related to the slow load time, but its messing up the styling all over my site:
<div id="top_bar">
<p class="mob_phone">
<i class="icon-envelope-alt"></i>
...
<!-- weird code starts here -->
<meta charset="EUC-JP">
<title>404 File Not Found</title>
<meta name="copyright" content="Copyright XSERVER Inc.">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
...
</style>
</p>
...
What I've Tried
I've disabled all my plugins and it still shows.
I've done a Sublime Find search in the theme and child theme directories and didn't find any of that code
I've Googled the name XSERVER but didn't find anything helpful
Searched a database dump
If anybody recognizes it and can point me to how I can remove it, or has any other ideas on how to track down whats injecting it, it would be greatly appreciated! I'm running out of ideas
It looks like you have the Japanese version of wordpress. Please see here for reference - https://translate.google.co.uk/translate?hl=en&sl=ja&u=https://www.xserver.ne.jp/manual/man_install_auto_word.php&prev=search
I would recommend uploading the core files from the English site - https://en-gb.wordpress.org/download/
This should solve your problems.
It might be worth checking what theme you're using as well and seeing if it's a Japanese theme.
While sharing the following URL on LinkedIn I found that LinkedIn is not taking title and description so thought to run debug tool so that it will correct this issue but it's not. Also, like feature is not working for this URL.
https://swertresresult.ph/
And after running debug, it is showing error
Sorry, something went wrong. We're working on getting this fixed as soon as we can. Go Back
This issue is only with this URL.. Similar URL is this (mybridaldresses.pk/bridal-mehndi-dresses-pakistani-designers-2018/) which is working perfectly.
Is there any other way to solve this issue?
While sharing on LinkedIn, you can determine which title, description and image will appear. To achieve this, your pages must contain some meta tags.
The following tags that must exist on your page.
<meta property='og:title' content='Title of the page"/>
<meta property='og:image' content='http://yourdomain.com/test.jpg"/>
<meta property='og:description' content='Description of the page"/>
<meta property='og:url' content='http://www.example.com/URL of the article"/>
Also, there are some limitations for images. Maximum image size is allowed is 1 MB. And smaller images from 80x150px will not be accepted.
I have a site that that I've built that is for a Women's Shelter, and it requires the 'exit button' or 'panic button'.. many sites just exit you to Google or another friendly site.. I see a few questions on here that solve the problem in one way or another, but this one my client is most interested in:
http://www.ncadv.org/
Can someone tell me how they're doing this? When you click on the 'safety exit' button, it redirects a BUNCH of times to different sites (thus filling the history quickly with other friendly sites).. I really like this approach, I just can't figure how they're doing it. Any ideas? I'd thought originally they were directing to sites that have their own redirect pages set up, but if you copy the initial link in a new window, it only redirects one time.
Probably via HTTP Referer. To test, run the following in command line:
curl --header "Referer: http://www.ncadv.org/" http://abconlinenews.info/localnews.php
The link, http://abconlinenews.info/localnews.php is the first outgoing link on the button.
The response (when passed an HTTP referer with ncadv.org) is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<title>ABCNews.com: Daily News, Breaking News and Video Broadcasts - ABC News</title>
<script>
function trigger() {
setTimeout("setPage();",20);
}
function setPage() {
window.location="/localnewstoday.php";
}
</script>
</head>
<body onload="trigger();">
<h1>Not Found</h1>
<p>The requested URL was not found on this server.</p>
<hr>
<address>Apache/2.2.16 (Debian) Server at http://abconlinenews.info Port 80</address>
</body>
</html>
From there, it's probably referers and redirects all the way down ;)
One thing you might consider is using javascript to keep the history clear. If you use "location.replace('www.google.com');" for example, it will replace the current entry with the new url and there won't be a history entry to go back to.
If you used a function and passed urls to it via onClick events, you could eliminate any history from being tracked at all.
I'm attempting to teach myself ASP.Net and I've decided to start with web pages so I'm going through the tutorial here
The problem I'm running into is that I can't get the Twitter helper to work. I just get a blank page and can't figure out what the issue is. I have checked to make sure the Twitter helper is installed and intellsense recognizes the TwitterGoodie methods. Here is my code...
#{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>twittertest</title>
</head>
<body>
<div>
#TwitterGoodies.Search("webmatrix")
</div>
</body>
</html>
The package referenced in the article you linked to uses version 1.0 of the Twitter API which was deprecated in June 2013. Hence nothing appears on your page. If you want a Twitter widget to appear on a page, go and get one directly from them: https://twitter.com/settings/widgets/new