webpack开发跨域问题解决办法
本文介绍了webpack开发跨域问题解决办法,分享给大家,具体如下:
1.说明
webpack内置了http-proxy-middleware可以解决请求的URL代理的问题
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 returnres.json(); }).then(res=>{ console.log(res); }) fetch('device/space').then(res=>{ //http://localhost:8080/device/space访问本地服务 returnres.json(); }).then(res=>{ console.log(res); })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。