首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >从React表单发布到我的后端API时出错

从React表单发布到我的后端API时出错
EN

Stack Overflow用户
提问于 2020-04-25 12:03:39
回答 1查看 49关注 0票数 0

我正在使用node/express、mysql和react创建这个任务跟踪应用程序。

现在,我正在尝试将输入的任务发布到我的数据库中(我已经编写了post路由,并且它在postman中运行良好),但是当我尝试从react的前端提交表单时,我得到了这个错误: 400 (Bad Request),以及SyntaxError: inputted < in JSON at position 0 js:23

我的节点服务器运行在本地主机3000上,而我的react应用程序运行在本地主机3001上,但是我向本地主机3000添加了一个代理。

下面是我在react的源码中的submitHandler代码

代码语言:javascript
运行
复制
submitHandler = (event) => {
        event.preventDefault() //to prevent page refresh
        console.log(this.state)

        fetch("https://localhost:3000/api/task", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(this.state)
        })
        .then(res => res.json())
        .then(data => console.log(data))
        .catch(err => console.log(err))
    }

下面是我的后端POST路由是如何编写的

代码语言:javascript
运行
复制
const db = require("../models");

module.exports = function(router) {

    router.get("/api/tasks", (req, res) => {
        db.Task.findAll({}).then(data => {
            res.json(data);
        });
    });

    router.post("https://localhost:3000/api/task", (req, res) => {
        db.Task.create({
            task: req.body
        }).then(data => {
            res.json(data)
        }).catch(err => res.json(err))
    })
}

我的server.js文件也在下面

代码语言:javascript
运行
复制
const express = require("express");
const app = express();
const path = require("path");
const PORT = process.env.PORT || 3000;
const db = require("./models");
const cors = require('cors')

var corsOptions = {
    origin: '*',
    optionsSuccessStatus: 200,
  }
app.use(cors(corsOptions)) 

app.use(express.static(path.join(__dirname, "build")));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.get("ping", function (req, res) {
    return res.send("pong");
})

// app.get("*", function (req, res) {
//     res.sendFile(path.join(__dirname, "build", "index.html"));
// })

require("./controllers/taskController")(app);

db.sequelize.sync().then(function() {

    app.listen(PORT, () => {
        console.log("Your API server is now on PORT:", PORT);
    })

})

你知道是什么导致了这个错误吗?

EN

回答 1

Stack Overflow用户

发布于 2020-04-25 12:16:05

在处理https://.时,通常会发生SSL错误。将所有出现的https://替换为http://,这可能会在开发时解决您的问题。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61420814

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档