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]

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?

[fjsj]

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

[teethgrinder]

Hi @fjsj this is production, I want to deploy my app. Is it a wrong way to use it ?

[fjsj]

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.