Данные не отправляются POST, читает OPTIONS в консоли

У меня есть приложение React redux, в котором я отправляю данные на свой сервер node (экспресс). В моем создателе действий данные отправляются на сервер, но он не отвечает на файл. Вот мой создатель действий.

// 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.info(err);
        } else {
            var id = result.insertId;

            console.info(id);
        }
    });

});

module.exports = router;

Затем, когда я проверяю журнал консоли, я просто получаю это взамен

OPTIONS /api/addtoinventory 200 10.300 ms - 4

Разве здесь не должно быть написано POST вместо OPTIONS?

Вы вызываете свой API из браузера? потому что браузер отправляет запрос OPTIONS в случае CORS

Suresh Prajapati 10.08.2018 09:29

я. у ive никогда не было этой проблемы с этим раньше, хотя

Ryne 10.08.2018 09:46

Возможно, вы вызываете его с другого ХОСТА источника запроса, отличного от хоста вашего сервера API. Можете ли вы проверить сообщение об ошибке в консоли браузера, возможно, он запрашивает разрешение CORS.

Suresh Prajapati 10.08.2018 09:48

Это сообщение: Ответ на предполетный запрос не проходит проверку контроля доступа: на запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Следовательно, к источнику 'локальный: 3000' доступ не разрешен. если у вас есть хорошая ссылка на решение, которое будет оценено по достоинству. Я читаю это прямо сейчас

Ryne 10.08.2018 09:55
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
4
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам необходимо создать промежуточное программное обеспечение, которое позволит 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

Спасибо вам за помощь. Интересно, почему я раньше не сталкивался с этой проблемой? Я прочитаю это!

Ryne 10.08.2018 10:11

Другие вопросы по теме

Похожие вопросы