解决问题

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 配置服务端代理相关推荐

Nginx_01_Nginx三大基础功能(静态服务器、虚拟主机、负载均衡/服务端代理)
文章目录一.前言二.Nginx三大功能--HTTP服务器三.Nginx三大功能--虚拟主机 3.1 虚拟主机 3.2 Nginx配置文件的结构 3.3 Nginx三种虚拟主机方式--基于ip的虚 ...
NOD32企业版2.5的安装和配置服务端教学视频
NOD32企业版2.5的安装和配置服务端教学视频(提供下载)-独家原创作者:细水日期:2007-02-04 字体大小: 小中大在作动画之前,我们需要了解下NOd32的功能和特性,即使你非常喜 ...
SpringCloud（第 029 篇）配置客户端 ConfigClient 接入配置服务端
SpringCloud(第 029 篇)配置客户端 ConfigClient 接入配置服务端 - 一.大致介绍 1.有配置服务端,那么势必就会有与之对应的客户端,SpringCloud 文档中集成也非 ...
Charles学习（四）之使用Map local代理本地静态资源以及配置移动端代理在真机上调试iOS和Android客户端...
前言问题一:我们在App内嵌H5开发的过程中,肯定会遇到一个问题就是我不想在chrome的控制台中调试也不想在模拟器中调试,我想要在真机上调试,那么如何解决这个问题呢? 问题二:我们期待调试时达到的 ...
linux设置docker自动启动,CentOS7安装Docker配置服务端和容器自启动
接上一篇,在VirtualBox上安装配置好了CentOS7,继续在这个虚拟机上装好docker并总结一下使用到的常用功能. 安装Docker 安装直接参考官网来安装就OK,没有遇到什么问题,值得注意 ...
iscsi target 配置(服务端安装)--一
一.想做esxi的HA试验,可是手上又没有存储设备,但是手上大硬盘的机器倒是有很多,所以就选择iscsi target在linux系统上配置iscsi共享存储. 二.服务端(119.147.146.2 ...
openfiler 搭建虚拟存储并配置服务端 (转载)
免费的存储服务器软件有FreeNAS 和 Openfiler. 其中Freenas的网站上只有i386及amd64的版本,也就是说Freenas不能支持64位版本的Intel CPU,而Openfil ...
wireguard如何配置----服务端
之前一直在用河对岸,但是随着使用时间和工作量的增加,越发觉得河对岸不稳定,不能满足需求,关键时刻掉链子,迫于无奈,考虑切换wireguard,经过一天的测试,目前稳定,还看不出什么问题,现在配置过程进 ...
东航航空货运系统技术解析(二)配置服务端与新建界面层
1.5 在BLL(逻辑层)编写代码与配置服务引用,通过DAL层的方法连接数据库并对数据库的数据进行操作第一步:在类库BLL里添加相关引用 1.5(图1) 在.NET架构里找到System.Servi ...

Vercel 配置服务端代理