本文主要是介绍Vercel 配置服务端代理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
解决问题
Vercel 是一个用于静态站点和无服务器功能的云平台，非常适合您的工作流。它使开发人员能够托管即时部署、自动扩展、无需监督、无需配置的网站和web服务。
Vercel 部署的站点是 HTTPS 协议的。
默认部署一个静态web服务时，下面两个场景会发生问题：
- 请求了跨域资源，开发阶段配置了代理，但是 Vercel 部署默认不会配置
- 请求的是 HTTP 协议的资源，Vercel 部署的站点是 HTTPS 协议的，所以浏览器会阻止
可以通过配置 Vercel 服务端代理来解决。
Vercel 配置服务端代理步骤：
- 部署 serverless，实现代理
- 配置相应的路径，统一转发到 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 服务
这篇关于Vercel 配置服务端代理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
