webpack-dev-server: Not allowed to load local resource - Webpack dev server error

• Operating System: Win 10
• Node Version: 11.14.0
• NPM Version: 6.7.0
• webpack Version: 4.30.0
• webpack-dev-server Version: 3.3.1

• This is a bug
• This is a modification request

Code

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


const path = require('path');

function resolvePath(dir) {
    return path.join(__dirname, '..', dir);
}

const env = process.env.NODE_ENV || 'development';
const target = process.env.TARGET || 'web';


module.exports = {
    mode: env,
    entry: [
        './src/js/app.js',
    ],
    output: {
        path: resolvePath('www'),
        filename: 'js/app.js',
        publicPath: '',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'],
        alias: {

            '@': resolvePath('src'),
        },
    },
    devtool: env === 'production' ? 'source-map' : 'eval',
    devServer: {
        hot: true,
        open: true,
        compress: true,
        contentBase: '/www/',
        disableHostCheck: true,
        watchOptions: {
            poll: 1000,
        },
        port: 8081
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                include: [
                    resolvePath('src'),
                    resolvePath('node_modules/framework7'),
                    resolvePath('node_modules/framework7-react'),
                    resolvePath('node_modules/template7'),
                    resolvePath('node_modules/dom7'),
                    resolvePath('node_modules/ssr-window'),
                ],
            },


            {
                test: /\.css$/,
                use: [
                    (env === 'development' ? 'style-loader' : {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    }),
                    'css-loader',
                    'postcss-loader',
                ],
            },
            {
                test: /\.styl(us)?$/,
                use: [
                    (env === 'development' ? 'style-loader' : {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    }),
                    'css-loader',
                    'postcss-loader',
                    'stylus-loader',
                ],
            },
            {
                test: /\.less$/,
                use: [
                    (env === 'development' ? 'style-loader' : {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    }),
                    'css-loader',
                    'postcss-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.(sa|sc)ss$/,
                use: [
                    (env === 'development' ? 'style-loader' : {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    }),
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'images/[name].[ext]',
                },
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'media/[name].[ext]',
                },
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[ext]',
                },
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(env),
            'process.env.TARGET': JSON.stringify(target),
        }),

        ...(env === 'production' ? [
            // Production only plugins
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        warnings: false,
                    },
                },
                sourceMap: true,
                parallel: true,
            }),
            new OptimizeCSSPlugin({
                cssProcessorOptions: {
                    safe: true,
                    map: {inline: false},
                },
            }),
            new webpack.optimize.ModuleConcatenationPlugin(),
        ] : [
            // Development only plugins
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(),
        ]),
        new HtmlWebpackPlugin({
            filename: './index.html',
            template: './src/index.html',
            inject: true,
            minify: env === 'production' ? {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            } : false,
        }),
        new MiniCssExtractPlugin({
            filename: 'css/app.css',
        }),
        new CopyWebpackPlugin([
            {
                from: resolvePath('src/static'),
                to: resolvePath('www/static'),
            },

        ]),


    ],
};

Expected Behavior

Using this js

let reader = new FileReader();
let file = res.target.files[0];

reader.onloadend = () => {
    newState.items[id].image = reader.result;
    this.setState(newState);
    this.saveQuote();
};

reader.readAsDataURL(file);

I should be able to access an image that is selected via file select. But i get Not allowed to load local resource: error

Actual Behavior

Able to access base64 image

For Bugs; How can we reproduce the behavior?

I think the problem is to do with my webpack config