当前位置: 首页 > news >正文

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:

brew install mkcert

2.2、初始化:

mkcert -install

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

mkcert localoms.test.com

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

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

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

3、项目vite.config.js 设置

  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/

相关文章:

  • 软考案例分析实例答题模板
  • CS内网渗透 - 如何通过冰蝎 Webshell 上线 Weblogic 服务器到 Cobalt Strike 并绕过杀软检测(360、火绒)?
  • 8.2 对话框2
  • 【硬核实战】从零打造智能五子棋AI:JavaScript实现与算法深度解析
  • SpringBoot 基于个性化定制的智慧校园管理系统设计与开发
  • 大模型学习六:‌小米8闲置,通过Termux安装ubuntu做个随身服务器,纯粹碍眼折腾
  • 【MCP-1】MCP是什么,从DEMO入手
  • 从零构建大语言模型全栈开发指南:第五部分:行业应用与前沿探索-5.2.2超级对齐与AGI路径探讨
  • 博途 TIA Portal之1200做从站与调试助手的TCP通讯
  • 深入解析机器学习
  • Python(八)—— 开发
  • 显示器各类异常处理方法
  • [ctfshow web入门] web30
  • Qt子模块的功能介绍
  • Python星球日记 - 第15天:综合复习(回顾前14天所学知识)
  • git命令自动拉去远程分支到本地
  • 基于RoboTwin的数据训练RDT开源VLA模型
  • 牛客华为机试--HJ48 从单向链表中删除指定值的节点C++
  • 典型反模式深度解析及重构方案
  • 什么是 Git?为什么要用版本控制?
  • 外交部介绍对巴西、阿根廷、智利、秘鲁、乌拉圭等5国试行免签政策
  • 安徽省委常委、合肥市委书记费高云卸任副省长职务
  • 宝通科技:与宇树合作已签约,四足机器人在工业场景落地是重点商业化项目
  • 硅料收储挺价“小作文”发酵光伏板块罕见大涨,知情人士:确实在谈
  • 成都警方通报:8岁男孩落水父母下水施救,父亲遇难
  • 首映|奥斯卡最佳国际影片《我仍在此》即将公映