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

【问题标题】：GET http://localhost:8000/api/signup net::ERR_ABORTED 404 (Not Found)GET http://localhost:8000/api/signup net::ERR_ABORTED 404（未找到）
【发布时间】：2020-07-07 00:07:25
【问题描述】：

我可以通过 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 个错误：

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

SyntaxError: eval (auth.js?8ae0:18) "error" 处输入意外结束

Uncaught (in promise) TypeError: Cannot read property 'error' of 未定义

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

我错过了什么？

【问题讨论】：

返回"JSON"，还是返回格式正确的JSON字符串？ Unexpected end of input 听起来像 res.json() 无法解析数据。如果不是真正的 JSON，请尝试 res.text()。如果没有，你能告诉我们你在 Postman 中得到的结果是什么样的吗？
我尝试了res.text()，因为我遇到了错误"SyntaxError: Unexpected token < in JSON at position 0 "error" "，这意味着它返回html 而不是Json。这是来自 Postman 的 Json：i.imgur.com/B9S0nyx.png

标签： javascript api http-headers

【解决方案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)
    })

这应该是这个函数的结尾

【讨论】：

感谢您提供的信息。但是我的控制台仍然向我显示一些错误。我认为我的 API 不想与前面连接。 Failed to load resource: the server responded with a status of 404 (Not Found)。尝试使用完整地址 http://localhost:8000/api/signup 和 ${API}/signup。
如果有人遇到与 CORS 相关的问题，请参阅此对话：stackoverflow.com/questions/43871637/…

【解决方案2】：

如果是注册路由，则错误应该以 POST 而不是 GET 开头。当您收到错误为 GET http://localhost:8000/api/signup net::ERR_ABORTED 404 (Not Found) 请检查您的路由似乎您的路由器和控制器方法不匹配

【讨论】：