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

Question

我目前正在使用 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>

Answer 1

In NextJs you can natively create server-side api routes

是的，因为它在 Node 上有一个服务器组件运行ning（所以你需要一个 Node 服务器来运行 Next/Nuxt 站点....除非使用“生成”模式)

As ViteSSG (Server Side Generated) has the ability of pre-rendering the shipped html

是，在构建期间

and running code on server-side

我不知道你为什么这么想，但我真的很怀疑。 vite-ssg 运行仅在构建时。它没有在运行时间（为您的预呈现页面提供服务时）

需要甚至可用的服务器组件

Vite本身只是开发工具。同样，Vite 的“服务器”组件仅在开发期间提供资源服务。有一些插件允许您简化服务器端路由的创建，如 vite-plugin-mix or fastify-vite 但两者都只是为您生成一个服务器端代码包，您需要将节点服务器设置为实际运行 API

但您确实需要一些服务器功能 - Stripe 文档在这方面非常清楚。但是您不需要独立的服务器（需要设置和运行s 24/7）。你可以尝试的是所谓的“无服务器计算”。大多数托管服务提供商都有类似的东西，包括 Netlify - Netlify functions

我没有直接使用它的经验，但是如果你google a bit you can find an examples了解如何将它与 Vite 集成（使用代理）

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

Create api calls in Vite (with ViteSSR / ViteSSG)

node.js

stripe-payments

vuejs3

vite