解决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)