webpack成神之路（六）

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

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

2. 还有一种情况，后端接口还没有开发好，我们前段自己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

3. 第三种情况，我们不想前后端分离，直接在服务端启动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成神之路（七）https://www.jianshu.com/p/67d5540532cd