Getting errors regarding cross-site requests in step 5.

[kkalavantavanich]

I was getting errors regarding cross-site requests when doing Step 5. This is the error message I received in the browser console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/assets/bundles/ce1bf8085cbd65984219.hot-update.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
[HMR] Update check failed: hotDownloadManifest/request.onreadystatechange@http://localhost:3000/assets/bundles/vendors.js:57:23

I am using [email protected], firefox@58, and [email protected].

[kkalavantavanich]

Just wanted to share my solution, if anyone got into the same situation: Change the server.js from:

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.local.config')

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline: true, 
    historyApiFallback: true,
}).listen(3000, config.ip, function(err, result) {
    if  (err) {
        console.log(err)
    }

    console.log('Listening at ' + config.ip + ':3000')
})

to:

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.local.config')

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline: true, 
    historyApiFallback: true,
    headers: {
        'Access-Control-Allow-Origin': '*'
    }
}).listen(3000, config.ip, function(err, result) {
    if  (err) {
        console.log(err)
    }

    console.log('Listening at ' + config.ip + ':3000')
})

Would be great if someone can include this into the tutorial.