vue项目本地调试使用https

由于测试环境远程接口,是采用https协议,为了能正常携带cookie访问接口,需要把本地项目也采用https协议访问。前提是后端的cookie设置在二级域名下,且允许固定其他子域名跨域访问(需要在后端设置)

项目框架:vue3,node:v22.13.0

1、首先在 hosts 文件中做好域名映射:

例如:测试环境域名:oms.test.com,那么本地域名映射可以设置为 127.0.0.1 localoms.test.com

2、 设置好本地域名映射后,生成对应的https证书:

2.1、 安装mkcert:

bash 复制代码
brew install mkcert

2.2、初始化:

bash 复制代码
mkcert -install

2.3、生成 localoms.test.com 证书:

bash 复制代码
mkcert localoms.test.com

在当前目录下将产生两个文件:

  1. 证书文件:./localoms.test.com.pem
  2. 私钥文件:./localoms.test.com-key.pem

2.4、可以将证书和私钥文件,拷贝到项目根目录 certs目录下

3、项目vite.config.js 设置

javascript 复制代码
  server: {
    host: 'localoms.test.com',  // 本地使用 域名 访问,需要做 hosts 域名映射
    port: 3001,        // 使用的端口,默认是 3001
    open: true,        // 启动时自动打开浏览器
    cors: true,        // 启用跨域支持(可选)
    allowedHosts: ['localoms.test.com'],
    https: { // 设置https证书,本地开发使用https访问
      key: fs.readFileSync('./certs/localoms.test.com-key.pem'),
      cert: fs.readFileSync('./certs/localoms.test.com.pem'),
    },
    proxy: {
      '/': {
        target: 'https://oms.test.com',
        changeOrigin: true,
      }
    }
  },

4、本地启动,测试访问:https://localoms.test.com:3001/

相关推荐
QQ1__8115175154 小时前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
钛态4 小时前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
一粒黑子4 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
独角鲸网络安全实验室4 小时前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
紫微AI4 小时前
前端文本测量成了卡死一切创新的最后瓶颈,pretext实现突破了
前端·人工智能·typescript
GISer_Jing4 小时前
AI前端(From豆包)
前端·aigc·ai编程
IT枫斗者4 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
测试修炼手册4 小时前
[测试技术] 深入理解 JSON Web Token (JWT)
前端·json
AI老李4 小时前
2026 年 Web 前端开发的 8 个趋势!
前端
里欧跑得慢4 小时前
15. Web可访问性最佳实践:让每个用户都能平等访问
前端·css·flutter·web