Webpack配置代理跨域

webpack配置跨域服务

只要协议、域名、端口号任意一个不相同就无法获取数据。

先简单写一个后端服务server.js

let express = require('express');
let app = express();
app.get('/user',function(req,res){
    res.json({name:'jan'})
})
app.listen(8000,function(){
    console.log('port start')
})

这个时候只要访问http://localhost:8000/user即可获取数据。

但是这个时候假如前端的端口号是8080，那么就无法获取数据，这个时候就要跨域。

index.js

let xhr = new XMLHttpRequest();
xhr.open('get',"/api/user",true);
xhr.onreadystatechange = function(){
    console.log(xhr.response)
}
xhr.send()
//由于当前端口号不相同，会报错404

这个时候需要去webpack中配置

devServer:{
    port:8080,
    open:ture,
    contentBase:"static",
    hot:true,
    proxy:{//启动代理
        '/api':{
            target:'http://localhost:8000',
            secure:false, //若为true则表示https开头
            pathRewrite:{'^/api':''},//重写api前缀
        	changeOrigin:true //把请求头中的host改成服务器地址
        }
    }
}

当需要自己调试的时候可以进行前端造数据

//webpack.config.js
module.exports ={
    ...
    devServer:{
       	port:8080,
        open:ture,
        contentBase:"static",
        hot:true,
        before:function(app,server){
            app.get('/api/user',function(req.res){
                res.json({custom:'respon'})
            });
        }
    }
}