创建一个自己的跨域代理服务器_createproxymiddleware

项目无需重启，就可以实现跨域代理
新建一个文件夹 lightweight-proxy

• 1.在该文件夹下，使用cmd打开
  
  依次执行一下命令，进行初始化

yarn init
git init
yarn add express
1
2
3

• 2.安装 http-proxy-middleware 中间件

yarn add http-proxy-middleware
1

在 package.json 中的 scripts 下新建一个名为 dev 的脚本，内容为：node src/index.mjs

• 3.在根目录下新建 src/index.mjs，并初始化内容：

import express from 'express'
import { createProxyMiddleware } from 'http-proxy-middleware';
const app = express();

// --------- 看这里 ↓ -------------------------
app.use('/', createProxyMiddleware({
  target: 'https://juejin.cn/',
  changeOrigin: true
}));
// --------- 看这里 ↑ -------------------------
app.listen(3000);
1
2
3
4
5
6
7
8
9
10
11

以上代码的关键就在注释中着重强调的区域，为路由 ‘/’ 下的所有请求指定使用一个中间件，代理到 ‘https://juejin.cn/’ 地址上去。

因此，当你在浏览器中输入 http://localhost:3000 时，你会惊奇地发现，你打开了掘金的主页：（虽然，因为掘金官网 “防盗链” 机制的存在，你无法刷出文章列表。）

实际项目中的代理

import express from 'express'
import { createProxyMiddleware } from 'http-proxy-middleware';
const app = express();

// --------- 看这里 ↓ -------------------------

// 凡是以 '/prod-api' 开头的都认定为 xhr 请求 
app.use('/prod-api', createProxyMiddleware({
  target: 'https://dev.my-server.com/', // 这一行是你的服务端地址
  changeOrigin: true,
  pathRewrite: {
    '^/prod-api': '' // 在向服务端发起请求时，去掉标识xhr的前缀
  }
}));

// 其他请求则认定为前端资源请求，如：html/js/css 等
app.use('/', createProxyMiddleware({
  target: 'http://localhost:9527/',
  changeOrigin: true
}));
// --------- 看这里 ↑ -------------------------

app.listen(3000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

启动代理服务

npm run dev
1

然后就可以按照上面的方式，代理你想代理的服务了