如何在VueJS中安全存储密钥？个人博客部署技术咨询

核心原则：绝对不能在前端代码（包括Vue项目）中存储或暴露私钥——前端代码最终会被打包发送到用户浏览器，任何人均可查看，私钥一旦泄露会导致CMS内容被篡改或滥用。正确的做法是通过你的Go后端作为代理层，处理与ButterCMS的交互，私钥仅在服务器端存储和使用。

具体实现步骤 #

1. 在Go服务器端存储私钥

   • 将ButterCMS的私钥配置在Go服务器的环境变量中，而非前端项目里：
     • 本地开发时：可以在Go项目根目录创建.env文件（务必添加到.gitignore，避免提交到版本控制），用配置工具（如viper）读取；
     • 生产部署时：通过部署平台的环境变量功能设置（比如Docker的--env参数、云服务器的系统环境变量、Kubernetes Secret等），避免硬编码。
   • 示例Go代理接口代码：

     package main
     
     import (
         "io/ioutil"
         "net/http"
         "os"
     )
     
     // 代理前端请求到ButterCMS
     func proxyButterCMSRequest(w http.ResponseWriter, r *http.Request) {
         apiKey := os.Getenv("BUTTER_CMS_API_KEY")
         if apiKey == "" {
             http.Error(w, "服务器未配置API密钥", http.StatusInternalServerError)
             return
         }
     
         // 拼接ButterCMS的API地址，带上私钥
         targetURL := "https://api.buttercms.com/v2" + r.URL.Path + "?auth_token=" + apiKey + "&" + r.URL.RawQuery
         resp, err := http.Get(targetURL)
         if err != nil {
             http.Error(w, "请求CMS失败", http.StatusInternalServerError)
             return
         }
         defer resp.Body.Close()
     
         // 将CMS响应转发给前端
         body, _ := ioutil.ReadAll(resp.Body)
         for k, v := range resp.Header {
             w.Header()[k] = v
         }
         w.WriteHeader(resp.StatusCode)
         w.Write(body)
     }
     
     func main() {
         // 注册代理路由，前端请求这个路径获取CMS内容
         http.HandleFunc("/api/cms/", proxyButterCMSRequest)
         // 托管Vue打包后的静态文件
         http.Handle("/", http.FileServer(http.Dir("./dist")))
         http.ListenAndServe(":8080", nil)
     }
     

2. 修改Vue前端的请求逻辑

   • 不再直接调用ButterCMS的API，转而请求Go后端的代理接口，无需在前端携带任何密钥：

     // Vue组件中获取博客文章的示例代码
     async getBlogPost(slug) {
       try {
         // 请求后端代理接口
         const res = await fetch(`/api/cms/posts/${slug}`);
         const data = await res.json();
         return data.data;
       } catch (err) {
         console.error("获取文章失败:", err);
       }
     }
     

3. 为什么不能用Vue的.env文件？
   Vue项目中的环境变量会在构建阶段被注入到前端代码中，最终会以明文形式出现在打包后的JS文件里，任何人都能通过浏览器开发者工具查看，完全起不到保密作用，因此官方明确不推荐用这种方式存储敏感信息。

内容的提问来源于stack exchange，提问作者NicolaM94