为什么来自 Node/Express 的 POST 和 PUT 请求在 React/Redux 中不起作用？ 我的 GET 和 DELETE 请求一切正常。 所有请求都在 Postman 中工作

Question

所以，我有一个问题，一切都在 Postman 中工作，我的 GET 和 DELETE 请求甚至可以在全栈程序（Node/Express、React/Redux/Hooks、Microsoft SQL Server）中工作，但我的 POST 和 PUT 请求不起作用. 正如您在下图中所看到的，我有 403 个错误，这些行来自“console.log(data);”，而不是我的错误处理程序/捕获器，因此这是一个“好”的请求，但某些内容未授权。 可以在此处查看用于显示数据正在传递但未被接受的控制台日志和服务文件。

我尝试了很多很多解决方案和很多研究。 据我了解，这可能是 CORS 的问题，但我真的不确定。 此外，在 Redux DevTools 中，它不会显示我的“UPDATE_DEVICE”或“CREATE_DEVICE”操作，所以我知道它们甚至没有被接受。

这是来自 AddDevice 的代码：

import { useDispatch } from "react-redux";
import { createDevice } from "../actions/devices";

const AddDevice = () => {
    const initialDeviceState = {
        id: null,
        title: "",
        detail: "",
        published: false
    };
    const [device, setDevice] = useState(initialDeviceState);
    const [submitted, setSubmitted] = useState(false);

    const dispatch = useDispatch();

    const handleInputChange = event => {
        const { name, value } = event.target;
        setDevice({ ...device, [name]: value });
    };

    const saveDevice = () => {
        const { title, detail } = device;

        dispatch(createDevice(title, detail))
            .then(data => {
                setDevice({
                    id: data.id,
                    title: data.title,
                    detail: data.detail,
                    published: data.published
                });
                setSubmitted(true);

                console.log(data);
            })
            .catch(e => {
                console.log(e);
            });
    };

    const newDevice = () => {
        setDevice(initialDeviceState);
        setSubmitted(false);
    };

    return (
        <div className="submit-form">
            {submitted ? (
                <div>
                    <h4>You submitted successfully!</h4>
                    <button className="btn btn-success" onClick={newDevice}>
                        Add
                    </button>
                </div>
            ) : (
                <div>
                    <div className="form-group">
                        <label htmlFor="title">Title</label>
                        <input
                            type="text"
                            className="form-control"
                            id="title"
                            required
                            value={device.title}
                            onChange={handleInputChange}
                            name="title"
                        />
                    </div>

                    <div className="form-group">
                        <label htmlFor="detail">Detail</label>
                        <input
                            type="text"
                            className="form-control"
                            id="detail"
                            required
                            value={device.detail}
                            onChange={handleInputChange}
                            name="detail"
                        />
                    </div>

                    <button onClick={saveDevice} className="btn btn-success">
                        Add
                    </button>
                </div>
            )}
        </div>
    );
};

export default AddDevice;

这是我更新设备的代码：

useEffect(() => {
        getDevice(props.match.params.id);
    }, [props.match.params.id]);

    const handleInputChange = event => {
        const { name, value } = event.target;
        setCurrentDevice({ ...currentDevice, [name]: value });
    };

    const updateStatus = status => {
        const data = {
            id: currentDevice.id,
            title: currentDevice.title,
            detail: currentDevice.detail,
            published: status
        };

        dispatch(updateDevice(currentDevice.id, data))
            .then(response => {
                console.log(response);

                setCurrentDevice({ ...currentDevice, published: status });
                setMessage("The status was updated successfully!");
            })
            .catch(e => {
                console.log(e);
            });
    };

    const updateContent = () => {
        dispatch(updateDevice(currentDevice.id, currentDevice))
            .then(response => {
                console.log(response);
                setMessage("The device was updated successfully!");
                props.history.push("/devices");
            })
            .catch(e => {
                console.log(e);
            });
    };

    const removeDevice = () => {
        dispatch(deleteDevice(currentDevice.id))
            .then(() => {
                props.history.push("/devices");
            })
            .catch(e => {
                console.log(e);
            });
    };

    return (
        <div>
            {currentDevice ? (
                <div className="edit-form">
                    <h4>Device</h4>
                    <form>
                        <div className="form-group">
                            <label htmlFor="title">Title</label>
                            <input
                                type="text"
                                className="form-control"
                                id="title"
                                name="title"
                                value={currentDevice.title}
                                onChange={handleInputChange}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="detail">Detail</label>
                            <input
                                type="text"
                                className="form-control"
                                id="detail"
                                name="detail"
                                value={currentDevice.detail}
                                onChange={handleInputChange}
                            />
                        </div>

                        <div className="form-group">
                            <label>
                                <strong>Status:</strong>
                            </label>
                            {currentDevice.published ? "Published" : "Pending"}
                        </div>
                    </form>

                    {currentDevice.published ? (
                        <button
                            className="m-3 btn btn-sm btn-danger"
                            onClick={() => updateStatus(false)}
                        >
                            UnPublish
                        </button>
                    ) : (
                        <button
                            className="m-3 btn btn-sm btn-danger"
                            onClick={() => updateStatus(true)}
                        >
                            Publish
                        </button>
                    )}

                    <button className="m-3 btn btn-sm btn-danger" onClick={removeDevice}>
                        Delete
                    </button>

                    <button
                        type="submit"
                        className="btn btn-success"
                        onClick={updateContent}
                    >
                        Update
                    </button>
                    <p>{message}</p>
                </div>
            ) : (
                <div>
                    <br />
                    <p>Please click on a device.</p>
                </div>
            )}
        </div>
    );
};

export default Device;

最后，这是我来自后端的 server.js 代码：

var express = require('express');
var bodyParser = require('body-parser');
const cors = require("cors");

var app = express();

var corsOptions = {
    origin: "http://localhost:8083"
};

app.use(cors(corsOptions));
app.use(express.json());
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }));

const db = require('./app/config/db.config');

const Role = db.role;

db.sequelize.sync();
// db.sequelize.sync({ force: true }).then(() => {
// console.log("Drop and re-sync db.");
// initial();
// });
// CODE ABOVE MAY BE NECESSARY FOR DATABASE TESTING, ESPECIALLY IF DATABASE MIGRATION OCCURS BECAUSE THE "initial" FUNCTION ESTABLISHES ROLES, WHICH IS CRUCIAL

require("./app/router/router.js")(app);

var server = app.listen(3000, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("App listening at http://%s:%s", host, port)
})

function initial(){
    Role.create({
        id: 1,
        name: "USER"
    });

    Role.create({
        id: 2,
        name: "ADMIN"
    });

    Role.create({
        id: 3,
        name: "PM"
    });
}

存储库在这里（ https://github.com/vaahtlnirn1 ；我仅有的两个公共存储库）供您查看，但我不认为这些文件之外还有什么问题。 我有一种感觉，该解决方案非常愚蠢且很小，因为数据正在正确传递等等，但是我现在已经坚持了大约 2 个小时，并且尝试了许多解决方案，但无法从其他类似的解决方案中找到我的答案问题在这里。 非常感谢帮助！

Answer 1

发送请求格式错误。

axios.post (url, data, {...headers here})