Question

我可以通过Postman击中该端点http://localhost:8000/api/signup，它返回JSON

POST http：// localhost：8000 / api / signup

{
    "name": "Username",
    "email": "username@mail.co",
    "password": "abcedf"
}

响应

{
    "message": "Signup success! Please signin"
}

在我的前端（使用next.js构建）中，我试图使用fetch做同样的事情，但出现3个错误：

获取http：// localhost：8000 / api / signup net :: ERR_ABORTED 404（未找到）

SyntaxError：在eval（auth.js？8ae0：18）“错误”处输入意外结束

未捕获（承诺）TypeError：无法读取的属性“错误” 未定义

config.js

import getConfig from 'next/config'

const { publicRuntimeConfig } = getConfig()

export const API = publicRuntimeConfig.PROD ? 'https://production.website.com' : 'http://localhost:8000'
export const APP_NAME = publicRuntimeConfig.APP_NAME

auth.js

import fetch from 'isomorphic-fetch'
import { API } from '../config'

export const signup = user => {
    // return fetch(`${API}/signup`,
    return fetch(`http://localhost:8000/api/signup`,
        { mode: 'no-cors'},
        {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
        },
        body: JSON.stringify(user)
    })
        .then(res => {
            return res.json()
        })
        // .then(data => console.log('success:', data))
        .catch(err => console.log(err, 'error'))
}

SignupComponent.js中的提交功能

const handleSumbit = e => {
    e.preventDefault()
    // console.table({ name, email, password, error, loading, message, showForm })
    setValues({...values, loading: true, error: false})
    const user = { name, email, password }

    signup(user)
    .then(data => {
        if(data.error) {
            setValues({ ...values, error: data.error, loading: false })
        } else {
            setValues({...values, name: '', email: '', password: '', error: '', loading: false, message: data.message, showForm: false})
        }
    })
}

每次触发handleSubmit时，后端服务器控制台

GET /api/signup 404 0.417 ms - 149
GET /api/signup 404 0.516 ms - 149
GET /api/signup 404 0.499 ms - 149
GET /api/signup 404 0.313 ms - 149

我想念什么？

Answer 1

我认为是因为您的陈述

 .then(res => {
            return res.json()
        })

您要使用fetch返回诺言，您应该在.then（）和.catch（）函数返回的函数不在函数本身之内

signup(user)
    .then(data => {
     do something with data      
})
.catch((err) => handle err))

export const signup = user => {
    // return fetch(`${API}/signup`,
    return fetch(`http://localhost:8000/api/signup`,
        { mode: 'no-cors'},
        {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
        },
        body: JSON.stringify(user)
    })

这应该是该功能的结束

Answer 2

如果它是注册路由，则错误应以POST而不是GET开头。当您以GET http：// localhost：8000 / api / signup net :: ERR_ABORTED 404（未找到）收到错误时请检查您的路由，似乎您的路由器和控制器的方法不匹配

GET http：// localhost：8000 / api / signup net :: ERR_ABORTED 404（未找到）

2 个答案: