Не удается получить тело запроса при использовании Fetch API, но JQuery AJAX работает
Я работаю над проектом, где
- Мои API написаны на Express.js (4.16) - в ПОРТ: 1337
- Фронтенд-приложение находится в React.js (16.2) - в PORT: 3000
Итак, есть несколько API-интерфейсов, которые мне нужно вызвать из приложения React.js, проблема, с которой я столкнулся:
ПРОБЛЕМА -
НЕ РАБОТАЕТ - fetch () API
fetch('localhost:1337/rest/api', {
body: JSON.stringify( {name: "Sidd", "info": "Lorem ipsum dolor .."} ),
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
mode: 'no-cors',
method: 'post'
})
Когда я использую fetch () API, я не получаю тело запроса в моем API, определенном в Express.js
console.info(req.body) // On logging the request body
{} // am getting this [empty]
РАБОТАЕТ - jQuery AJAX
$.ajax('localhost:1337/rest/api', {
type: 'post',
data: {name: "Sidd", "info": "Lorem ipsum dolor .."},
dataType: 'application/json',
success: function (data, status, xhr) {
console.info('status: ' + status + ', data: ' + data);
},
error: function (jqXhr, textStatus, errorMessage) {
console.info('Error' + errorMessage);
}
});
Однако я получаю ОШИБКУ No 'Access-Control-Allow-Origin' header is present on the requested resource.!
Но, по крайней мере, в этом случае я ПОЛУЧАЮЩИЙ тело запроса в моем API. Также протестировал мои API через POSTMAN, и они работают полностью нормально. Я видел все обсуждения в Интернете, но ничего не работает.
Ой! Я также хотел бы добавить это - в моей настройке Express.js я правильно использую body-parser
app.use(bodyParser.json({limit: '2mb'})); // 2mb file upload limit
app.use(bodyParser.urlencoded({limit: '2mb', extended: true})); // 2mb file upload limit
ЧТО Я ХОЧУ!
- Решение для fetch () API
- Если НЕ fetch () API, как удалить ошибку
No 'Access-Control-Allow-Origin'из моего вызова jQuery Ajax. - Что я делаю неправильно?
Спасибо, парни!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поскольку 1337 и 3000 - разные порты, вы сталкиваетесь с запросом CORS.
Сначала установите mode: cors в запросе на выборку, а затем добавьте обработчик маршрутизатора.
router.use((req, res, next) => {
res.header('access-control-allow-origin', 'http://localhost:3000')
res.header('Access-Control-Allow-Credentials', true)
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With')
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
res.header('Access-Control-Max-Age', 1728000)
if (req.method === 'OPTIONS') {
return res.json({ status: 0, message: '', payload: null })
}
next()
})
перед вашим обработчиком rest/api.
После этого все готово.
Что ж, это решит проблему +1 для этого, но что насчет [fetch API]? Есть подсказка?
Вы можете прочитать документацию Использование Fetch для более подробной информации. И если вы не уверены в свойстве mode, ознакомьтесь с Запрос()
Ваш ответ помог мне понять, что мне нужно разрешить учетные данные в моих настройках, связанных с CORS, в приложении Django. Так что спасибо за это.
Возможный дубликат как-включить-cors-from-nodejs-server