POST未发送数据,请在控制台中读取“选项”

时间:2018-08-10 06:24:59

标签: reactjs express

我有一个React Redux应用程序,我正在其中将数据发布到我的节点(快速)服务器。在我的动作创建者中,数据已发送到服务器,但未响应文件。这是我的动作创作者。

// action creator
export function addItem(product) {
    return dispatch => {
        dispatch(request(product));

        axios.post(api + '/api/addtoinventory', { product })
        .then(res => {
            dispatch(success(product));
        })
        .catch(err => {
            dispatch(failure(err.toString()));
        });
    }

    function request(product) { return { type: ADDING_ITEM, product } }
    function success(product) { return { type: ITEM_ADDED, product } }
    function failure(error) { return { type: ADD_TOAST, payload: error} }
}

然后在我的快速文件中,我有这样的代码。

// server.js
var express = require('express');
var router = express.Router();
var multer = require('multer');
var uuidv4 = require('uuid/v4');
var path = require('path');
var database = require('./database');

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, '../../../adminpanel/src/0000001');
    },
    filename: (req, file, cb) => {
        const newFilename = `${uuidv4()}${path.extname(file.originalname)}`;
    cb(null, newFilename);
    }
});


const upload = multer({ storage });

router.post('/', function(req, res) {

    var title = req.body.product.title;
    var price = req.body.product.price;
    var description = req.body.product.description;

    database.query("INSERT INTO `Items` (`ID`, `Title`, `Price`, `Description`, `CreateDate`) VALUES (NULL, ?, ?, ?, CURRENT_TIMESTAMP)", [title, price, description], function(err, result) {
        if(err) {
            console.log(err);
        } else {
            var id = result.insertId;

            console.log(id);
        }
    });

});

module.exports = router;

然后,当我检查控制台日志时,我得到的只是回报

OPTIONS /api/addtoinventory 200 10.300 ms - 4

那不是说POST而不是OPTIONS吗?

1 个答案:

答案 0 :(得分:2)

您需要创建一个中间件,该中间件将允许您注册的req来源使用CORS

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'your domain here');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');

    next();
}

然后在启动文件中包含此中间件

app.use(allowCrossDomain);

如果您想了解更多 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests