- 现在我们来说一下访问接口的问题，处理跨越问题。
- 我们想启动一个服务。监听/user接口；
server.js
const express = require('express'); // webpack集成了express 不用单独安装
let app = express();
app.get('=/user', (req, res)=>{
res.json({msg: '我是返回数据'})
})
app.listen(3000)
- 然后我们在index.js中原生发起ajax请求/user接口
index.js
var ajax = new XMLHttpRequest();
ajax.open('get','http://localhost:3000/user');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
console.log(ajax.responseText);
}
}
-
然后我们npm run serve
image.png -
由于webpack是3333 端口，接口是3000 端口，所以存在跨越问题
image.png 要在开发的过程中解决也很好办。我们把index.js中的接口修改一下 改为
/api/user访问当前端口下的/api/user接口， /api是为了让webpack正则匹配的，后面会处理掉。
index.js
var ajax = new XMLHttpRequest();
ajax.open('get','/api/user');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
console.log(ajax.responseText);
}
}
- webpack.config.js中的devSever配置如下
devServer: {
port: 3333,
proxy:{
'/api':{ // 匹配/api开头的接口
target: 'http://localhost:3000', // 接口的域名
pathRewrite: {
'api': '' // 把api 替换为空
}
}
}
},
-
启动服务 之后控制台 打印出来了，说明跨越成功了
image.png
- 还有一种情况，后端接口还没有开发好，我们前段自己mock数据。
- index.js 直接请求/user接口，不需要加/api了
var ajax = new XMLHttpRequest();
ajax.open('get','/user');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
console.log(ajax.responseText);
}
}
- 我们也把wepack.config.js 改造一下
devServer: {
port: 3333,
// 提供的方法 钩子函数
before(app){
app.get('/user', (req, res)=>{
res.json({msg: '我是被拦截的数据'})
})
}
// proxy:{
// '/api':{ // 匹配/api开头的接口
// target: 'http://localhost:3000', // 接口的域名
// pathRewrite: {
// 'api': '' // 把api 替换为空
// }
// }
// }
},
-
然后我们启动服务，可以看到控制台打印的就是我们自己mock的数据了。
image.png
- 第三种情况，我们不想前后端分离，直接在服务端启动webpack，这样就不会存在跨越问题了。这样我们就直接在server.js中改造就行；
- 首先既然要启动webpack，我们在server.js中就要引入webpack，
- 然后我们需要一个中间件
webpack-dev-middleware安装cnpm i webpack-dev-middleware -D
server.js
const express = require('express'); // webpack集成了express 不用单独安装
let app = express();
// 引入webpack
let webpack = require('webpack');
// 引入webpack中间件
let middle = require('webpack-dev-middleware');
// 引入配置文件
let config = require('./webpack.config.js');
// 处理配置文件
let complier = webpack(config);
// 启动webpack
app.use(middle(complier))
app.get('/user', (req, res)=>{
res.json({msg: '我是返回数据'})
})
app.listen(3100)
- 然后我们启动
node server.js， 可以看不仅服务端启动了，webpack也启动了。 我们访问 localhost:3100;控制台可以看到请求成功了
image.png -
我们也可以直接访问服务端/user接口
image.png
