NodeJS 在Astro JS框架中使用API Route构建表单提交处理程序

slmsl1lt  于 2023-01-01  发布在  Node.js
关注(0)|答案(1)|浏览(430)

我正在尝试构建一个表单提交处理程序,用于提交无JS表单。但是API无法接收html表单发送的数据。我正在使用documentation
js文件包含一个名为post的导出异步函数,该函数接收请求参数并将其记录到控制台,然后返回一个新的Response对象,该对象的请求参数字符串化为JSON,状态为200。
index.astro文件包含一个HTML表单,该表单的操作为/api/signin. json,方法为post,它有两个输入字段,一个是text类型,名称为text,值为test,另一个是submit类型。
表单提交后,终端中的输出显示了记录到控制台的请求对象。但是,浏览器中的输出显示了一个具有多个属性的JSON对象,但这些属性都不包含表单中提交的数据。目前尚不清楚API为什么没有接收到表单中的数据。可能是表单本身有问题。post函数处理数据的方式,或者其他一些东西。
在Astro JS目录中,我的文件位于

  1. /pages/signin.json.js
    1./页/索引.天文

代码//登录. json. js

export async function post({request}) {
    console.log(request)
  return new Response(JSON.stringify(request), {
    status: 200,    
  });
}

//索引.天文

---
---

<form action="/api/signin.json" method="post" >
                <input type='text' name='text' value='test' />
                <input type="submit" />
            </form>

提交后输出

终端

Request {
  size: 0,
  follow: 20,
  compress: true,
  counter: 0,
  agent: undefined,
  highWaterMark: 16384,
  insecureHTTPParser: false,
  [Symbol(Body internals)]: {
    body: <Buffer 74 65 78 74 3d 61 73 61>,
    stream: Readable {
      _readableState: [ReadableState],
      _read: [Function: read],
      _events: [Object: null prototype] {},
      _eventsCount: 0,
      _maxListeners: undefined,
      [Symbol(kCapture)]: false
    },
    boundary: null,
    disturbed: false,
    error: null
  },
  [Symbol(Request internals)]: {
    method: 'POST',
    redirect: 'follow',
    headers: {
      accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8',
      'accept-encoding': 'gzip, deflate, br',
      'accept-language': 'en-US,en',
      'cache-control': 'max-age=0',
      connection: 'keep-alive',
      'content-length': '8',
      'content-type': 'application/x-www-form-urlencoded',
      cookie: 'io=NH8tzNimTmy0AtvFAAAA; asasa=asaa',
      host: 'localhost:3000',
      origin: 'http://localhost:3000',
      referer: 'http://localhost:3000/login',
      'sec-fetch-dest': 'document',
      'sec-fetch-mode': 'navigate',
      'sec-fetch-site': 'same-origin',
      'sec-fetch-user': '?1',
      'sec-gpc': '1',
      'upgrade-insecure-requests': '1',
      'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'
    },
    parsedURL: URL {
      href: 'http://localhost:3000/api/signin.json',
      origin: 'http://localhost:3000',
      protocol: 'http:',
      username: '',
      password: '',
      host: 'localhost:3000',
      hostname: 'localhost',
      port: '3000',
      pathname: '/api/signin.json',
      search: '',
      searchParams: URLSearchParams {},
      hash: ''
    },
    signal: null,
    referrer: undefined,
    referrerPolicy: ''
  },
  [Symbol(astro.clientAddress)]: '::1'
}

浏览器

{
"size": 0,
"follow": 20,
"compress": true,
"counter": 0,
"highWaterMark": 16384,
"insecureHTTPParser": false
}

我验证了表单操作和方法是正确的,并且与预期的端点和HTTP predicate 匹配。在本例中,表单操作是/api/signin. json,方法是post,根据提供的代码,这似乎是正确的。
这是我配置文件//astro.config.mjs

import { defineConfig } from 'astro/config';
import netlify from "@astrojs/netlify/functions";
import svelte from "@astrojs/svelte";

// https://astro.build/config
export default defineConfig({
  output: "server",
  adapter: netlify(),
  integrations: [svelte()]
});
iih3973s

iih3973s1#

下面是a way to handle forms

// pages/index.astro

<form action="/api/signin" method="post" >
        <input type='text' name='text' value='asa' />
        <input type="submit" />
</form>

现在是端点

// pages/api/signin.js
export async function post({request}) {
  const data = await request.formData(); // Here's the data sent by the form
  const text = data.get('text'); // Here's how you get the value of a field
  console.log(text);
  return new Response(JSON.stringify(request), {
    status: 200,
  });
}

相关问题