在 Vite 中创建 api 调用（使用 ViteSSE / ViteSSE）

Posted 2023-03-16

技术标签:

【中文标题】在 Vite 中创建 api 调用（使用 ViteSSE / ViteSSE）【英文标题】：Create api calls in Vite (with Vites-s-r / ViteSSG) 【发布时间】：2022-01-06 18:17:31 【问题描述】：

我目前正在使用 ViteJS 开发一个简单的电子商务网站。我的项目使用：

Vue 3 Vite 2.4 vite-plugin-pages，用于自动生成路由（Nuxt 风格） vite-ssg，用于服务器端生成（SEO 优化）

托管是在免费的 netlify 帐户上完成的（如果需要，我愿意切换到 vercel 或其他帐户）。数据处理是通过 Headless CMS GraphCMS 完成的，托管在他们的服务器上。

按照Stipe integration with NextJS & GraphCMS 上的教程，我遇到了一个问题。在 NextJs 中，您可以在本地创建服务器端 api 路由，这与 Vite 不同。由于 ViteSSG（服务器端生成）具有预渲染交付的 html 并在服务器端运行代码的能力，我想了解如何创建一个服务器路由来提供一个 api 而不必经历仅为简单调用创建和托管单独的后端：

POST https://localhost:3000/api/create-checkout-session

因为如果我在客户端（在 payBtn 点击处理程序内）创建条带结帐会话，则客户端可以更改数据（价格等...），因为处理程序代码将在客户端提供。我希望在服务器端生成此会话，并将其 Id 发送回客户端，然后在结帐过程中使用。它将删除更改数据的能力。

如果需要，我可以分享更多代码，如果不够清楚，我可以扩展信息。感谢您的帮助！

/* main.js */
import 'vue-global-api'
import  ViteSSG  from 'vite-ssg'
import generatedRoutes from 'virtual:generated-pages'
import  setupLayouts  from 'virtual:generated-layouts'
import App from './App.vue'

const routes = setupLayouts(generatedRoutes)

export const createApp = ViteSSG(
  App,
   routes ,
  (ctx) => 
    // install all modules under `modules/` folder (i18n, nprogress, pwa)
    Object.values(import.meta.globEager('./modules/*.js')).map(i => i.install?.(ctx))
  
)

/* Wanted API route */
import Stripe from 'stripe'
import  useAPI  from '@/utils/GraphCMS'

const graphcms = useAPI()
const stripe = new Stripe(/* STIPE API KEY*/)

export default (req, res) => 
  const  slug  = req.body
  // fetch product from GraphCMS
  const result = await graphcms.getSingleProduct(slug)

  try 
    const session = stripe.checkout.sessions.create(
      success_url: 'http://localhost:3000/?id=CHECKOUT_SESSION_ID',
      cancel_url: `http://localhost:3000/services/$slug`,
      /*...*/
    )
    res.json(session)
   catch(e) 
    res.json( error: message: e )
  

  return

<!-- Client Side API Call -->
<script setup>
...
/* goPay, called on button click => Should POST data to server-side API route */
const goPay = async (e) => 
    e.preventDefault()
    // Create checkout session
    const session = await fetch('/api/create-checkout-session', 
      method: 'POST',
      headers: 
        'Content-Type': 'application/json'
      ,
      body: JSON.stringify(
        slug: service.slug
      )
    )

    // redirect to checkout
  
</script>

<template>
  <PayBtn @click="goPay" />
</template>

【问题讨论】：

【参考方案1】：