1.可以用webpack模拟数据
index.js
let xhr = new XMLHttpRequest();
// http://localhost:8081 webpack-dev-server的服务 -> 3000
xhr.open('GET', '/user', true);
xhr.onload = function(){
console.log(xhr.response);
}
xhr.send();
webpack.config.js
devServer: { // 开发服务器的配置
before(app){ //提供的方法 钩子 这里的app相当于server.js里的app
app.get('/user', (req, res) => {
res.json({name: '这里是模拟数据-before'})
})
}
}
2.用server.js做后台服务器,用proxy代理在前端处理跨域
server.js文件
const express = require('express');
const app = express();
app.get('/user', (req, res) => {
res.json({name: '这里是后台返回的数据'})
})
app.listen('3000', console.log('listen server 3000...'));
webpack.config.js
devServer: { // 开发服务器的配置
// 1)重写的方式,把请求代理到express服务器上
proxy: {
'/api': {
target: 'http://localhost:3000', // 配置了一个代理
pathRewrite: {'/api': ''}
}
}
},
index.js
let xhr = new XMLHttpRequest();
// http://localhost:8081 webpack-dev-server的服务 -> 3000
xhr.open('GET', '/api/user', true);
xhr.onload = function(){
console.log(xhr.response);
}
xhr.send();
3.有服务端,不想用代理来处理,能不能在服务端中启动webpack,端口用服务端端口,用中间件middleware,此时不需要设置webpack.config.js文件的devServer了
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); //用webpack处理
app.use(middle(compiler));
app.get('/user', (req, res) => {
res.json({name: '这里是用中间件处理返回的数据'})
})
app.listen('3000', console.log('listen server 3000...'));
index.js
let xhr = new XMLHttpRequest();
// http://localhost:8081 webpack-dev-server的服务 -> 3000
xhr.open('GET', '/user', true);
xhr.onload = function(){
console.log(xhr.response);
}
xhr.send();
返回的结果