1. 我们需要安装前端开发包：cors、express、http-proxy-middleware。

  2. 然后在index.js中编写如下代码：可以为不同域名的接口请求配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const express = require("express");
const cors = require("cors");
const { createProxyMiddleware } = require("http-proxy-middleware");

const app = express();

const currentPort = 3000;//例如3000

// 配置 CORS
app.use(
  cors({
    origin: "*", // 允许来自 localhost:currentPort 的请求
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE", // 允许的 HTTP 方法
    credentials: true, // 是否支持 cookie 跨域
    optionsSuccessStatus: 204, // 用于 OPTIONS 请求的成功状态码
  })
);

// 监听你开启html的端口号，看是否正常运行
app.listen(currentPort, () => {
  console.log(`Server running on port ${currentPort}`);
});

//要请求的地址1
app.use(
  "/testApi",
  createProxyMiddleware({
    target: "ip地址:端口号",
    changeOrigin: true,
    pathRewrite: { "^/testApi": "" },
  })
);

//要请求的地址...
app.use(
  //配置方法同上
)

//要请求的地址n
//...
  1. 那么如何使用呢？要区分开发环境和生产环境，下面以get请求为例做一个说明：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 const env = "dev";//要部署该html则注释该行，开发时取消注释该行
// const env = "prod"; //要部署该html则取消注释该行，开发时注释该行

const baseURL = env === "dev" ? "http://127.0.0.1:3000" : "";

const mk1 = env === "dev" ? "/testApi" : "";

//获取字典
function getDictByTypeName(参数) {
  return new Promise((resolve) => {
    axios
      .get(
        baseURL + mk1 + "请求的接口地址",
        {
          params: { 参数 },
        }
      )
      .then((res) => {
        //其他逻辑
        resolve(response);
      });
  });
}