webpack開発クロスドメイン問題解決

webpack開発時のクロスドメイン問題の解決
1.説明
webpackは、要求されたURLエージェントを解決することができるhttp-proxy-middlewareの問題を内蔵している.
2.API
代理が必要なpathnameは/を追加します.

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: './app/js/index.js'
    output: {
        path: path.resolve(__dirname, 'dev'),
        //            
        filename: 'js/bundle.js',
        publicPath: '/',
        chunkFilename: '[name].chunk.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dev'),
        publicPath: '/',
        historyApiFallback: true,
        proxy: {
            //     '/device'             target： http://debug.xxx.com  
            '/device/*': { 
                target: 'http://debug.xxx.com',
                secure: false, //        https     
                changeOrigin: true
            }
        }
    }
}

3.使用
注:使用するurlは必ず/で開始しなければなりません.そうでなければ、指定された住所に代理できません.

    fetch('/device/space').then(res => {
        //      http://debug.xxx.com/device/space
        return res.json();
    }).then(res => {
        console.log(res);
    })

    fetch('device/space').then(res => {
        // http://localhost:8080/device/space       
        return res.json();
    }).then(res => {
        console.log(res);
    })