Vercel 配置服务端代理

解决问题

Vercel 是一个用于静态站点和无服务器功能的云平台，非常适合您的工作流。它使开发人员能够托管即时部署、自动扩展、无需监督、无需配置的网站和web服务。

Vercel 部署的站点是 HTTPS 协议的。

默认部署一个静态web服务时，下面两个场景会发生问题：

• 请求了跨域资源，开发阶段配置了代理，但是 Vercel 部署默认不会配置
• 请求的是 HTTP 协议的资源，Vercel 部署的站点是 HTTPS 协议的，所以浏览器会阻止

可以通过配置 Vercel 服务端代理来解决。

Vercel 配置服务端代理步骤：

1. 部署 serverless，实现代理
2. 配置相应的路径，统一转发到 serverless 服务

示例介绍

以 Vue CLI 生成的项目为例，使用 Vercel 部署了 HTTPS 协议的站点。

站点地址例如：https://vue-front.com

项目中需要请求第三方 API：http://backend-api.com/user/login

Vercel 部署 serverless 无服务器功能

Vercel Serverless Functions

使用 Vercel，您可以部署 Serverless Functions。

Serverless Functions 使用后端语言（例如 Node.js）编写的代码片段，接收 HTTP 请求并提供响应。

您可以使用 Serverless Functions 来处理用户身份验证、表单提交、数据库查询、定制slack命令等等。

以 Node.js 为例：

Node.js 文件通过 api 目录下的一个 JS 文件或 TS 文件，包含一个默认的导出函数，将作为 Serverless Functions。

安装代理中间件：

npm i -D http-proxy-middleware

在项目根目录创建 api 目录，在 api 下添加 proxy.js文件。

注意：只能将 Serverless 文件存放在 根目录下的 api 目录下才能被识别

const {
      createProxyMiddleware } = require('http-proxy-middleware')

module.exports = (req, res) => {
     
  let target = ''

  // 代理目标地址
  // 这里使用 backend 主要用于区分 vercel serverless 的 api 路径
  if (req.url.startsWith('/backend')) {
     
    target = 'http://backend-api.com'
  }

  // 创建代理对象并转发请求
  createProxyMiddleware({
     
    target,
    changeOrigin: true,
    pathRewrite: {
     
      // 通过路径重写，去除请求路径中的 `/backend`
      // 例如 /backend/user/login 将被转发到 http://backend-api.com/user/login
      '^/backend/': '/'
    }
  })(req, res)
}

此时可以提交文件触发 Vercel 部署，测试 Serverless Functions 是否生效：

此时访问 https://vue-web.com/api/proxy 就会执行编写的后端代码。

Vercel 配置本地路径和重写

Vercel 配置参考

通过在项目根目录放置一个 vercel.json配置文件，您可以提供一个选项列表来更改 Vercel 平台的默认行为。

Vercel 之前的版本可以通过 routes 配置路由，不过现在已经过时，官方建议使用 rewrites（重写）实现类似的需求。

在项目根目录下创建 vercel.json

{
     
  "rewrites": [
    {
     
      // 访问路径匹配规则
      "source": "/backend/(.*)",
      // 重写的目标地址
      "destination": "/api/proxy"
    }
  ]
}

请注意：以上注释仅用于说明，json 文件中不能写注释

该配置会将 https://vue-web.com/backend/为前缀的请求重写，转为请求 https://vue-web.com/api/proxy。

由于是重写，不会二次跳转，request 中的信息都会保留，所以不需要将后面的路径传递给 /api/proxy。

/api/proxy 内部会判断，如果请求路径以 /backend 为前缀，则代理到 http://backend-api.com。

再次提交部署，服务器代理配置完成。

简单示例

使用 Vercel 托管你的 API 服务