vercel 自动化部署项目和跨域问题

最新推荐文章于 2025-03-11 22:29:53 发布
最新推荐文章于 2025-03-11 22:29:53 发布
阅读量3.8k 收藏 9
点赞数 3
分类专栏： vue 文章标签： vercel vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40890601/article/details/120755007
版权
本文介绍了在使用Vue CLI搭建的项目中，如何解决在Vercel平台上遇到的跨域问题。Vercel提供一键自动化部署，但需要手动配置以处理请求转发。通过安装中间件，创建`api`文件夹和`proxy.js`，并更新`vercel.json`，成功解决了跨域问题。同时分享了一个已部署的项目实例，并提供了测试账户。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我使用的脚手架是Vue CLI ，过程中都很简单，出错的是跨域问题，在本地webpack反向代理，但部署到vercel后没有转发请求，还需要我们自己设置一番。
vercel 真的太好用了，一键自动化部署，步骤超级超级简单。
我把跟着coderwhy敲的项目部署上去了：https://my-bms.vercel.app/login
测试账户
用户名： coderwhy
密码： 123456
在使用vercel 要注意这几个问题，
1、注意vercel 默认的打包路径是dist，如果你更改了outputDir， 要记得在vercel 项目setting里重写，否则会出错
在这里插入图片描述

跨域问题

接下来记录以下如何解决跨域问题。
首先安装中间件http-proxy-middleware
在根目录新建api文件夹，新建proxy.js

// 该服务为 vercel serve跨域处理
const {
    createProxyMiddleware
最低0.47元/天 解锁文章
【ai对话工具】如何在 Vercel 上部署服务端数据库版 LobeChat，一步步搞定数据库、身份验证和存储配置
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
02-14 271
LobeChat, Vercel部署, 服务端数据库, 身份验证, S3存储, Clerk配置在搭建自己的 LobeChat 服务时，很多人都会选择在 Vercel 上进行部署，尤其是结合了服务端数据库版。今天，我就来分享下如何通过 Vercel 部署 LobeChat，并且一步步配置数据库、身份验证、S3存储等必要服务。如果你跟我一样，想让你的部署既顺畅又高效，来看看这些步骤吧！
实现vercel的反向代理和重定向
CS@zeny的博客
05-08 6525
使用vercel实现反向代理来解决不是https的请求问题
vue项目部署的跨域问题解决
weixin_42260782的博客
04-26 8918
跨域问题在前后端分离项目很常见，至于为什么会跨域，同源策略，百度各种博客都很详细，这里不再介绍，主要记录项目中的各种设置，解决的过程。 首先是后端： 过滤器： @Configuration public class GlobalCorsConfig { /** * 允许跨域调用的过滤器 */ @Bean public CorsFilter corsFilter() { CorsConfiguration config = new CorsCon
vercel-tmdb-proxy:使用Vercel无服务器功能的TMDB API的简单代理
05-23
vercel-tmdb-proxy 使用Vercel无服务器功能的TMDB API的简单代理 设置 需要TMDB_API_KEY环境变量，可以通过Vercel（ ）或通过创建.env文件来设置。 可以在以下位置找到获取个人TMDB API密钥的说明： : 当地的 要在本地运行无服务器Vercel： 首先使用npm i安装所有软件包 通过运行vercel将您的Vercel项目链接到该项目 使用vercel env pull任何Vercel env变量拉至本地计算机 然后运行vercel dev以运行本地实例，或者运行vercel dev vercel dev --listen PORT以在其他端口上运行
【Vercel部署个人网站全攻略！从零到上线，手把手教你白嫖顶级托管服务！】
最新发布
再见孙悟空的专栏
03-11 1350
这篇万字长文会从注册账号到部署Next.js项目，再到隐藏的高级玩法（比如防DDos攻击、边缘计算），手把手带你玩透Vercel！Vercel就是个“超级快递站”——你写完网站代码，打个包丢给它，它瞬间把你的网站分发到全世界的服务器，用户访问时自动选最近的节点，快得飞起！你可能听说过Vercel——前端圈子里公认的“真香神器”！大家好，我是小明，一个用Vercel白嫖了30多个网站的“白嫖教教主”。Vercel会自动检测项目类型（Next.js、React等），并生成最佳配置。，且所有接口允许跨域。
如何使用 Vercel 托管静态网站
白雾茫茫丶
04-24 3521
这篇文章介绍了使用Vercel托管静态网站的几种方式。首先介绍了通过Github部署项目，包括登录Vercel、添加项目仓库、配置和构建的步骤。然后介绍了通过本地部署项目，需要安装vercel依赖并执行相应命令的步骤。接下来介绍了如何使用Nest.js实现API服务和如何部署Typecho博客。最后提到了一些常见问题的解决办法，并建议对于单页面应用和动态后端服务接口应用，建议使用Vercel进行部署，而对于其他情况建议部署在自己的服务器上。
项目打包和自动化部署
shyyyl的博客
08-07 337
在传统的开发模式中，开发的整个过程是按部就班就行：但是这种模式存在很大的弊端：DevOps是Development和Operations两个词的结合，将开发和运维结合起来的模式：伴随着DevOps一起出现的两个词就是持续集成和持续交付(部署)：持续集成CI：持续交付和持续部署：云服务器我们可以有很多的选择：阿里云、腾讯云、华为云。但是在我们的课程中，我选择目前使用更加广泛的阿里云来讲解：我们需要注册阿里云账号https://aliyun.com/注册即可，非常简单购买云服务器其实是购买一个实例。1.来到控制
项目自动化部署与手动部署
m0_51221102的博客
03-12 5417
DevOps 传统的开发模式： 项目完成 => build => test => release => operate DevOps： 模块完成 => build => test => release => operate 持续集成： 持续交付： 持续部署： 阿里云服务器的配置 这里选择的是 CentOS 8.2。 重置系统后在远程连接中设置 root 密码。 安全 - 防火墙：配置暴露的端口号限制的 ip 地址来源。0.0.0.0 表示任何
Servle接口跨域解决办法
weixin_51563608的博客
09-13 473
S
Vercel 自动化部署
02-25
### 实现 Vercel 的自动化部署 #### 使用 `vercel` 命令进行快速部署 当执行 `vercel` 命令之后，该工具会自动处理项目的部署过程，并分配一个唯一的URL用于访问已部署的应用程序[^1]。对于任何代码库的变更，只需...
使用Astro+Vercel+Cloudflare一天时间开发部署上线一个知识博客网站，简直简简单单
小透明的博客
07-27 1793
Astro是一个基于React的静态站点生成器，它允许开发者快速构建高性能的网站。Astro集成了Markdown支持、SSR（服务器端渲染）、API路由等现代web开发所需的功能，特别适合创建博客、文档站点以及小型论坛。通过，我们不仅能够在一天内搭建起一个知识博客网站，并且还能部署上线啦。随着个人网站在互联网中的地位日益提升，掌握一项快速建站的技能，无疑会在个人品牌建设和知识分享的道路上，为我们增添一份强大的助力。如若大家想了解更多相关知识，请关注我，一名有故事的程序猿！！创作不易，麻烦大家给个关注和。
reverse-proxy:简单的反向代理应用
06-02
反向代理 使用进行简单的反向代理设置。 描述 这是一个使用 gem 设置的简单 Web 应用程序。 该应用程序允许通过在环境中指定每个主机来代理到多个主机。 用法 使用rackup运行应用程序： $ rackup config.ru 如果要禁用 Rack linter，则需要在部署模式下运行它。 如果您想为 Rails 应用程序设置代理，您很可能想要这样做，因为 Rails 会返回 linter 抱怨的响应。 为此，请设置-E选项： $ rackup -E deployment config.ru 这将在端口 9292 上启动 Web 服务器。 安装 安装依赖项，你应该很高兴： $ bundle install 贡献 请查看我们的以获取有关贡献的指南。 学分 做到了这一点。 我们是一家对优质代码充满热情的数字通信机构，如果您正在使用这个库，我们可能想。 执照 该项目在 MIT
JsProxyForVercel:JsProxy的优化修改版本，主要用于Vercel，本项目未开发完成！请勿测试使用！
05-21
JsProxyForVercel 这是一个使用 JavaScript For Nodejs 规范语法 编写的,搭建于 Vercel 服务的网页反向代理 前言 本项目由我的个人项目 优化而来，原项目不支持 Vercel ，本项目支持(大概吧？等我改好——咕咕咕) 部署 注：基于Vercel js内有详细注释自行修改 其它 Bilibili:Wuqibor Email: QQ:1722302509
使用vercel免费搭建vue项目
码农桃子的博客
05-15 1340
之前是通过Github作为服务器来发布静态网站，今天有人告诉我，这里有一个叫的商家可以直接白嫖，来试试给他上一课。
技能 | 使用vercel部署前端项目
m0_62300955的博客
08-29 558
使用vercel部署前端项目
【云资源 云服务】Vercel前端云的试用并和本地服务进行对比
ResumeProject的博客
02-04 1088
在执行该命令时，你将需要回答一些关于证书的问题，例如组织、组织单元、常用名等。填写这些信息时，请确保"Common Name"字段与你的服务器域名或IP地址匹配。文件）通常需要使用OpenSSL工具。以下是一个简单的步骤指南，演示如何生成自签名的SSL证书和私钥。如果你还没有安装OpenSSL，可以使用包管理器安装。Remix，主要支持 React，但是目标也支持其他的框架；Nux ，支持 Vue。生成SSL证书和私钥文件（
如何在国内访问vercel部署应用？
qq_62352333的博客
11-23 6564
在今年暑假的字节青训营的最终大项目的答辩当中，当我还在为我的前端项目如何部署到服务器而焦头烂额之时，许多牛人在描述自己的项目部署经历的时候只是随口的提了一句——使用**Vercel进行前端项目的一键部署。我寻思还有这么牛逼的玩意儿？吓得我赶紧去查了一下——有一说一这是我第一次对部署项目感到这么的简单和轻松，这玩意能够自动检测你在git上面的提交（需要指定分支），然后自动的进行重新构建并且重新部署，最最最重要的就是它还会自动生成一个免费的域名并且自带SSL证书也就是可以直接通过https进行访问。
vuepree部署到vercel
qq_39842563的博客
01-29 383
打包命令包目录位置。
上线跨域问题（解决）！
m0_61301727的博客
09-07 283
打包之前需要配置线上地址（在controller业务里面加入跨域注解）配置完成，pc端和安卓可以正常访问，但是ios不能正常访问。还需要配置yml文件，更换mysql、redis等地址。另外，全局的跨域config也需要配置一下。ios需要在浏览器设置中打开防跨域追踪。在axios的全局配置中配置。里面填写线上和开发地址。vercel代理配置。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值