webpack 解决跨域问题
一、webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题
安装:npm install --save http-proxy-middleware
二、要代理的 pathname 要加 /
示例:
devServer: { contentBase: path.resolve(__dirname, 'dev'), publicPath: '/', historyApiFallback: true, proxy: { // 请求到 '/device' 下 的请求都会被代理到 127.0.0.1:3000 中 '/get/*': { target: '127.0.0.1:3000', secure: false, // 接受 运行在 https 上的服务 changeOrigin: true } } }
三、例如fetch请求
fetch('/get').then(res => { // 被代理到 127.0.0.1:3000/get return res.json(); }).then(res => { console.log(res); }) fetch('device/space').then(res => { // http://localhost:8080/get访问本地服务 return res.json(); }).then(res => { console.log(res); })
注:使用的url 必须以/开始 否则不会代理到指定地址