解决webpack跨域的三种方式
1.使用代理
2.模拟数据
3.前端启动到服务端上

webpack跨域问题

演示文件目录展示：

创建server.js文件来开启服务，模拟数据请求

// server.js
let express = require('express');
let app = express();

app.get('/api/user',(req,res)=>{
    res.json({name:'小白'})
})

app.listen(3000)

在src->index.js文件中发送请求：

// index.js
let xhr = new XMLHttpRequest();
xhr.open('GET','/api/user',true);
xhr.onload = function() {
    console.log(xhr.response)
}
xhr.send()

这个时候，当我们npm run dev后，访问http://localhost:8080/,出现错误：

我们应该请求的是http://localhost:3000/api/user，而不是http://localhost:8080/api/user;这里产生了跨域问题；
那么，如何配置webpack来解决呢？
配置：
在webpack.config.js中配置：

devServer:{
    proxy:{
        '/api':'http://localhost:3000'  // 配置了一个代理: 如何访问的是/api开头，就去http://localhost:3000这里找
    }
},

这样子就可以成功请求到http://localhost:3000/api/user的数据：

这里有一个问题，不一定所有的接口都是以/api开头的，按照上面的配置写法，如果有其他开头的接口请求，那我们还需要在下面配置不同开头对应的代理地址；
这里，我们可以这样配置：

// server.js
let express = require('express');
let app = express();

app.get('/user',(req,res)=>{
    res.json({name:'小白2'})
})
app.listen(3000)

// index.js
let xhr = new XMLHttpRequest();
xhr.open('GET','/api/user',true);
xhr.onload = function() {
    console.log(xhr.response)
}
xhr.send()

webpack.config.js中配置：

devServer:{
    proxy:{  // 重写的方式，把请求代理到express服务器上
        '/api':{
            target:'http://localhost:3000',
            pathRewrite:{'/api':''} // 把/api 替换为空
        }
    }
},

如上配置，就可以将前端以/api开头的请求代理到指定的服务端地址http://localhost:3000,并且会把请求地址的/api去除；

如果想直接在webpack里模拟数据可以这样配置：

devServer:{
    // 模拟数据
    before(app){
        app.get('/user',(req,res)=>{
            res.json({name:'小白'})
        })
    }
},

// index.js
let xhr = new XMLHttpRequest();
xhr.open('GET','/user',true);
xhr.onload = function() {
    console.log(xhr.response)
}
xhr.send()

如果自己有服务端，不用代理来处理；

就可以在服务端中启动webpack,端口用服务端端口
需要安装webpack-dev-middleware：它可以让我们在服务端启动webpack

npm i webpack-dev-middleware -D

代码：

// server.js
let express = require('express');
let app = express();
let webpack = require('webpack');

let middle = require('webpack-dev-middleware');
let config = require('./webpack.config.js');
let compiler = webpack(config);

app.use(middle(compiler))

app.get('/user',(req,res)=>{
    res.json({name:'小白2'})
})
app.listen(3001)

// index.js
let xhr = new XMLHttpRequest();
xhr.open('GET','/user',true);
xhr.onload = function() {
    console.log(xhr.response)
}
xhr.send()

运行效果：

总结：解决webpack跨域的三种方式

1. 使用代理：服务端是别人的，使用这个方式

devServer:{
    proxy:{  // 重写的方式，把请求代理到express服务器上
        '/api':{
            target:'http://localhost:3000',
            pathRewrite:{'/api':''} // 把/api 替换为空
        }
    }
},

2. 前端模拟数据

devServer:{
    // 模拟数据
    before(app){
        app.get('/user',(req,res)=>{
            res.json({name:'小白'})
        })
    }
},

3. 服务端是自己写的，就可以把前端代码启动到服务端上

// server.js
let express = require('express');
let app = express();
let webpack = require('webpack');

let middle = require('webpack-dev-middleware'); // 引入这个
let config = require('./webpack.config.js');    // 配置文件
let compiler = webpack(config);

app.use(middle(compiler))

app.get('/user',(req,res)=>{
    res.json({name:'小白2'})
})
app.listen(3001)