从客户端在 NEXTjs 中发送 POST 请求

Question

我正在用 NEXTjs 开发一个网站。我需要它在用户单击按钮时触发 POST 请求。

我在 localhost:55331 上有一个处理请求的节点应用程序（我测试过）。

NEXTjs 应用示例：

export const getStaticProps = async (context) => {
  
// Here I am just creating the function that will be triggered when clicking a button

  async function postData(url = '', data = {}) {
    
    const response = await fetch(url, {
        method: 'POST',
        mode: 'cors',
        .
        .
        .
        body: JSON.stringify(data)
    });
    
    const json = await response.json();
    return json
 }
      
  

  async function getresponse (data){
    postData('http://localhost:55331/', data)
    .then(res => {
            alert(res.body)
        })
   }
}




// This is the static page, the client side, where the function will be triggered
const Page = () =>{

    return(
        
        <div>
           <button onClick {()=>getresponse({'data'})}>Send POST</button>                       
        </div>
}

但在运行 next dev 或 build && start 之后，当我单击生成 post 的按钮时，出现错误：TypeError: Failed to fetch 指向 fetch() 函数。

当我向其他网页发送 POST 请求时也会发生这种情况，当然我从来没有得到响应。

您是否知道如何从客户端发送 post 请求并获得响应？

干杯！

Answer 1

您应该将函数放在 Page 组件中。来自 getStaticProps 的函数在组件中不可访问。

const Page = () =>{
 async function postData(url = '', data = {}) {
    
    const response = await fetch(url, {
        method: 'POST',
        mode: 'cors',
        .
        .
        .
        body: JSON.stringify(data)
    });
    
    const json = await response.json();
    return json
 }
      
  async function getresponse (data){
    postData('http://localhost:55331/', data)
    .then(res => {
            alert(res.body)
        })
   }
  }

    return(
        
        <div>
           <button onClick {()=>getresponse({'data'})}>Send POST</button>                       
        </div>
}

export default Page

从客户端在 NEXTjs 中发送 POST 请求

Sending a POST request in NEXTjs from client side

api

post

request

node.js

next.js