webpack跨域请求

1、devServer的proxy代理

webpack.config.js

devServer: {
    proxy: {// 重写方式，代理转发到http://localhost:3000
      '/api': {
        target: 'http://localhost:3000',
        pathReWrite: { '^/api': '' }
      }
    }
  },

访问时：

axios.get('/api/user').then(...)

2、使用mock模拟数据

devServer: {
    //前端mock模拟数据，app为express里的app
    before (app) {
      console.log('app', 111)
      app.get('/user', (req, res) => {
        res.json({ name: 'jack,before' })
      });
    }
  },

访问时：

axios.get('/user').then(...)

 因为mock数据不需要跨域，所以请求的路径也不需要api开头

3、使用中间件

1）下载插件

yarn add webpack-dev-middleware -D

2) webpack.config.js同级新建server.js

// webpack跨域问题
let express = require('express');

let app = express();
let webpack = require('webpack');
// 中间件 在服务端启动webpack
let middle = require('webpack-dev-middleware');
// webpack配置
let config = require('./webpack.config');
// webpack编译后的配置对象
let compiler = webpack(config);
// 使用中间件
app.use(middle(compiler));

app.get('/user', (req, res) => {
  res.json({
    name: 'jack',
    age: 21
  })
})

app.listen(3000);

访问时：

axios.get('/user').then(...)

使用 node server.js启动服务

使用http://localhost:3000/user访问user接口，使用http://localhost:3000访问网页