403 error occurs when running Custom Visualizations on localhost

Looker Q&A Looker
1

Hello everyone. I have created a JS file for Looker visualization and had it set up on Admin>Platform>Visualizations. It was working fine when I used webpack-dev-server v3.10.3. However after I upgraded it to v5.2.1, an 403 error happens. Is there any step I have missed for Looker when upgrading to v5.2.1? Following is my webpack.develop.js

const commonConfig = require('./webpack.config');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  ...commonConfig,
  output: {
    ...commonConfig.output,
    publicPath: 'https://localhost:4443/',
  },
  mode: 'development',
  module: {
    rules: [
      ...commonConfig.module.rules,
      {
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [require.resolve('react-refresh/babel')],
            }
          }
        ]
      }
    ],
  },
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers':
        'X-Requested-With, content-type, Authorization',
    },
    server: {
      type: 'https',
      options: {
        key: 'xxxxxxx',
        cert: 'xxxxxxxx',
      },
    },
    port: 4443,
    hot: true,
  },
  devtool: 'inline-source-map',
  plugins: [...commonConfig.plugins, new ReactRefreshWebpackPlugin()],
}