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'})
});
}
}
}