Ошибка запроса для Axios в reactjs с Rails 6 API в локальной сети

#ruby-on-rails #reactjs #ruby #axios #ruby-on-rails-6

#ruby-on-rails #reactjs #ruby #axios #ruby-on-rails-6

Вопрос:

Я использую axios in reactjs , который запущен на порту 3000, а Rails 6 приложение API запущено на 3001.

Я нажал на /authenticate POST API и проверил на вкладке сети браузера для xhr вкладки, где я обнаружил статус как (cancelled) и отсутствие ответа или ошибки.

В rails журнале,

 Started POST "/api/v1/authenticate" for ::1 at 2020-09-04 09:56:49  0530
Processing by Api::V1::AuthenticationController#authenticate as HTML
  Parameters: {"email"=>"example@mail.com", "password"=>"[FILTERED]", "authentication"=>{"email"=>"example@mail.com", "password"=>"[FILTERED]"}}
  

Пожалуйста, подскажите, что я здесь делаю не так

Мой axios вызов выглядит следующим образом,

   const response = await axios({
    URL: "http://localhost:3001/api/v1/authenticate",
    method: "POST",
    data: {"email":"example@mail.com","password":"123123123"},
    headers: { 'Content-Type': 'application/json' }
  });
  

Я следовал ссылке, но не работал

src/setupProxy.js

 const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    '/api/v1',
    createProxyMiddleware({
      target: 'http://localhost:3001/',
      changeOrigin: true,
    })
  );
};
  

API кажется правильным, поскольку следующий токен возврата в ответных json данных,

 curl -H "Content-Type: application/json" -X POST -d '{"email":"example@mail.com","password":"123123123"}' http://localhost:3001/api/v1/authenticate
  

Ответ №1:

Я не уверен, используете ли вы Devise или нет, но я использую Knock для JWT, который имеет неприятную привычку требовать data включения auth вот так:

 const response = await axios({
    URL: "http://localhost:3001/api/v1/authenticate",
    method: "POST",
    data: {"auth": {"email":"example@mail.com","password":"123123123"}},
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }
  });
  

в то время как для разработки требуется дополнительный заголовок Accept: application/json

Смотрите здесь -> https://github.com/nsarno/knock#authenticating-from-a-web-or-mobile-application

https://github.com/heartcombo/devise/wiki/API-Mode-Compatibility-Guide

Не знаю, отвечает ли это на ваш вопрос.

Комментарии:

1. Я собираюсь удалить вопрос, поскольку это была глупая ошибка во внешнем интерфейсе. Вызов Axios был отменен из-за элемента button, на который он был вызван с onClick событием, имел тип =»submit», который в конечном итоге запускает отправку формы. Поэтому мне пришлось изменить тип.

2. Если вы не предоставляете Accept внутренний заголовок, предполагается, что это HTML тип, и для этого запроса API может отображать данные JSON.