webpack成神之路（六）

2019-05-15 本文已影响1人 AAA前端

现在我们来说一下访问接口的问题，处理跨越问题。

我们想启动一个服务。监听/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

webpack成神之路（六）

猜你喜欢

热点阅读