文章目录
  2. 一，背景
  3. 二，使用

一，背景

当我们部署在vercel的项目不是静态网站，而是有接口的动态项目时，我们需要配置Vercel的无服务函数，这是有如下几点原因的：

  • Vercel默认转发https请求，如果你的后台接口是http，那么你就需要对vercel进行配置。
  • 如果后台没有配置跨域的时候，你需要配置Vercel跨域转发代理。

二，使用

# 安装依赖
pnpm install -D http-proxy-middleware
pnpm install -D express @types/express

你需要在项目根目录下创建两个文件：

  • 一个是新建一个api目录，然后新建一个proxy.ts文件(这里怎么命名都可以)
  • 一个是vercel.json，为vercel配置请求转发。
// proxy.ts
// 该服务为 vercel serve跨域处理
import { createProxyMiddleware } from 'http-proxy-middleware'

export default function (req, res, next) {
  let target = ''

  // 代理目标地址
  // 这里使用 backend 主要用于区分 vercel serverless 的 api 路径
  if (req.url.startsWith('/backend')) {
    target = 'http://101.43.177.191:8081/api'
  }
  // 创建代理对象并转发请求
  // 安装@types/express和express提供类型支持，不然报错
  createProxyMiddleware({
    target,
    changeOrigin: true,
    pathRewrite: {
      // 通过路径重写，去除请求路径中的 `/backend`
      // 例如 /backend/user/login 将被转发到 http://backend-api.com/user/login
      '^/backend/': '/',
    },
  })(req, res, next)
}

// vercel.json
{
  "rewrites": [
    {
      "source": "/backend/(.*)",
      "destination": "/api/proxy"
    }
  ]
}