如何在Nuxt中使用私有API密钥实现点击按钮后安全发送请求

你的思路是正确的，Nuxt本身支持创建服务端接口供客户端调用，密钥只会在服务端读取，不会泄露到客户端，具体实现步骤如下：

步骤1：创建服务端路由 #

根据你使用的Nuxt版本选择对应实现：

Nuxt 3 / Nuxt Bridge 版本 #

在项目根目录新建server/api/external-request.post.js文件（后缀.post代表仅接收POST请求，降低安全风险），代码示例：

export default defineEventHandler(async (event) => {
  // 读取客户端传递的用户提交数据
  const { someUserData } = await readBody(event)
  // 读取privateRuntimeConfig中的API凭据，仅服务端可访问，不会暴露到客户端
  const { apiKey, apiBaseUrl } = useRuntimeConfig()
  // 服务端向目标API发起请求
  const apiResponse = await $fetch(`${apiBaseUrl}/你的目标接口路径`, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${apiKey}`
    },
    body: {
      data: someUserData
    }
  })
  // 将第三方API返回结果透传给客户端
  return apiResponse
})

Nuxt 2 版本 #

1. 首先在项目根目录新建server-middleware/external-request.js文件，代码示例：

const axios = require('axios')
export default async function (req, res) {
  // 仅允许POST请求
  if (req.method !== 'POST') {
    res.statusCode = 405
    return res.end('Method Not Allowed')
  }
  // 读取私有配置的API凭据
  const { apiKey, apiBaseUrl } = require('../nuxt.config.js').privateRuntimeConfig
  // 解析客户端提交的请求体
  const reqBody = await new Promise((resolve) => {
    let data = ''
    req.on('data', chunk => { data += chunk })
    req.on('end', () => resolve(JSON.parse(data)))
  })
  // 服务端发起第三方API请求
  try {
    const targetRes = await axios.post(`${apiBaseUrl}/你的目标接口路径`, {
      data: reqBody.someUserData
    }, {
      headers: { Authorization: `Bearer ${apiKey}` }
    })
    res.setHeader('Content-Type', 'application/json')
    res.end(JSON.stringify(targetRes.data))
  } catch (err) {
    res.statusCode = err.response?.status || 500
    res.end(JSON.stringify({ error: err.message }))
  }
}

2. 在nuxt.config.js中注册该服务端中间件：

export default {
  // 其他原有配置保持不变
  serverMiddleware: [
    { path: '/api/external-request', handler: '~/server-middleware/external-request.js' }
  ]
}

步骤2：修改客户端代码 #

直接在sendRequest方法中调用本地服务端接口即可，不需要传递任何密钥：

<template>
<form method="post" action="#" @submit.prevent="sendRequest">
    <input v-model="someUserData">
    <button type="submit" :disabled="loading">Send some data :D</button>
</form>
</template>

<script>
export default {
  data() {
    return {
      someUserData: "",
      loading: false
    }
  },
  methods: {
    async sendRequest() {
      this.loading = true
      try {
        // 调用本地Nuxt服务端接口，无需携带密钥
        const result = await this.$fetch('/api/external-request', {
          method: 'POST',
          body: {
            someUserData: this.someUserData
          }
        })
        // 自行处理请求成功逻辑
        console.log('请求成功', result)
      } catch (err) {
        // 自行处理错误逻辑
        console.error('请求失败', err)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

注意事项 #

• privateRuntimeConfig的配置仅服务端代码可读取，客户端代码无法直接获取，完全不用担心密钥泄露
• 可在服务端接口层增加参数校验、请求频率限制等逻辑，进一步提升安全性

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