webpack4.0 跨域

1.正常跨域

如何模拟跨域呢？webpack-dev-server会启动一个express服务,我们可以重新再模拟一个新的后台服务，代码如下：

//根目录下新建server.js
//server.js
let express = require("express");

let app = express();

app.get("/api/user", (req, res) => {
  res.json({ name: "我是返回的结果" });
});

app.listen(3000);

在vscode下可以下载插件“code runner”，它可以模拟node环境执行js，上边server.js执行后就是启动了一个监听3000端口的后台，在文件中右键“Run Code”后，打开浏览器访问，结果如下：

10550.png
然后我们编写前端代码index.js

let xhr = new XMLHttpRequest();
xhr.open("GET", "/api/user", true);

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.send();

我们没有配置devServer的时候，webpack-dev-server默认启动的是8080端口，但是server.js启动的是3000端口,因此跨域了，此时可以在webpack中配置devServer字段来达到接口转发的目的，代码如下：

output: {
   ...
},
devServer: {
  proxy: {
    '/api': 'http://localhost:3000',  //配置了代理
  }
},

但是如果接口太多，而且第一个字段不一致(但后台是同一个地址（域名）)，比如"api/user","test/abc","user/xxx"...,很自然的会想到以下代码。

devServer: {
    proxy: {
      "/api": "http://localhost:3000", //配置了代理
      "/test": "http://localhost:3000",
      "/user": "http://localhost:3000"
    }
  },

这样写没有问题，只是相同的地址却写了三遍，所以我们可以再请求的时候，带上一个自定义的字段，比如“mock”,那么轻轻就是这样的:"/mock/api/user","/mock/test/abc","/mock/user/xxx".

devServer: {
    proxy: {
      "/mock": {
        target: "http://localhost:3000", //配置了代理
        pathRewrite: {  //接口重写
          '/mock': ''   //碰到“/mock”，就将它替换为空
        }
      }
    }
  },

2.前端自己mock数据

devServer: {
    // proxy: {
    //   "/api": {
    //     target: "http://localhost:3000", //配置了代理
    //     pathRewrite: {
    //       "/api": "/api"
    //     }
    //   }
    // },
    before(app) {
      app.get("/api/user", (req, res) => {
        res.json({ name: "我是返回的内容---before" });
      });
    }
  },

3.有服务端，但是用代理来处理，在服务端中启动webpack

代码如下：

//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 compailer = webpack(config); //编译后的结果

app.use(middle(compailer));

app.get("/api/user", (req, res) => {
  res.json({ name: "我是返回的结果" });
});

app.listen(3000);

执行： node.server.js

013835.png