Mixed content The page was loaded over HTTPS, but requested an insecure script 'http://0.0.0.0:8080/main.js'. This request has been blocked; the content must be served over HTTPS.
teethgrinder opened this issue · 3 comments
I have a webpage using vue3 with webpack5 on frontend and django3/django-webpack-loader on frontend. I have deployed it in production server but I cannot get my main.js working because I think that of https to http request.
In Django I have:
STATICFILES_DIRS = (
'/home/ytsejam/public_html/medtourism/medtourism/static',
'/home/ytsejam/public_html/medtourism/medtourism/frontend/assets',
'/home/ytsejam/public_html/medtourism/medtourism/frontend/dist',
)
WEBPACK_LOADER = {
'DEFAULT': {
'CACHE': not DEBUG,
'BUNDLE_DIR_NAME': 'dist/', # must end with slash
'STATS_FILE': '/home/ytsejam/public_html/medtourism/medtourism/frontend/webpack-stats.json',
'POLL_INTERVAL': 0.1,
'TIMEOUT': None,
'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
'LOADER_CLASS': 'webpack_loader.loader.WebpackLoader',
}
}
in the webpack.config.js
module.exports = (env = {}) => {
return {
mode: env.prod ? 'production' : 'development',
devtool: env.prod ? 'source-map' : 'eval-cheap-module-source-map',
entry: path.resolve(__dirname, './src/main.ts'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js',
clean: true
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
{
test: /\.css$/i,
use: [ "style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
// More information here https://webpack.js.org/guides/asset-modules/
type: "asset",
},
]
},
resolve: {
extensions: ['.ts', '.js', '.vue', '.json'],
alias: {
'vue': '@vue/runtime-dom',
'bulma': 'bulma/css/bulma.css',
}
},
plugins: [
new VueLoaderPlugin(),
new BundleTracker({
filename: './webpack-stats.json',
publicPath: 'http://0.0.0.0:8080/'
}),
new HtmlWebpackPlugin({
title: 'Production',
}),
],
devServer: {
headers: {
"Access-Control-Allow-Origin":"\*"
},
static: {
directory: path.join(__dirname, 'public'),
},
hot: true,
client: {
overlay: true,
},
}
};
}
and in package.json
{
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"@apollo/client": "^3.5.5",
"@vue/apollo-option": "^4.0.0-alpha.16",
"bulma": "^0.9.3",
"bulma-carousel": "^4.0.24",
"graphql": "^16.0.1",
"graphql-tag": "2.12.6",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"vue": "^3.2.22",
"vue-carousel": "^0.18.0",
"vue-router": "4",
"vue3-carousel": "^0.1.31",
"vuex": "^4.0.2",
"webpack-bundle-tracker": "0.4.3"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.2.22",
"css-loader": "^6.5.1",
"sass": "^1.43.5",
"sass-loader": "^12.3.0",
"ts-loader": "^9.2.6",
"typescript": "^4.5.2",
"vue-loader": "16.8.2",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0",
"yarn": "^1.22.17"
},
"scripts": {
"serve": "webpack-dev-server",
"build": "webpack --config webpack.config.js"
}
}
the error is :
Request URL: https://0.0.0.0:8080/main.js
Mixed Content: The page at 'https://medtourism.uk/' was loaded over HTTPS, but requested an insecure script 'http://0.0.0.0:8080/main.js'. This request has been blocked; the content must be served over HTTPS.
how can I fix error?
Hi @teethgrinder
Any reason for running the local Django server in HTTPS?
If you want HTTPS, try: https://webpack.js.org/configuration/dev-server/#devserverhttps
Hi @fjsj this is production, I want to deploy my app. Is it a wrong way to use it ?
Yes, in production you want to npm run build
then python manage.py collectstatic --noinput
.
See: https://github.com/django-webpack/django-webpack-loader#usage-in-production
Closing the issue for now. Please let me know if you still have issues once you do that.