Не удается отправить правильные Params JSON от администратора-на-отдыха (reactJS)

Question

Привет всем Я после этой https://marmelab.com/admin-on-rest/index.html, для входа в вещи, которые я отслеживаю https://marmelab.com/admin-on-rest/Authentication.html:

import { AUTH_LOGIN } from 'admin-on-rest'; 
import restClient from './restClient'; 

export default (type, params) => { 
    if (type === AUTH_LOGIN) { 
    const { username, password } = params; 
    const request = new Request('http://localhost:9000/login', { 
     method: 'POST', 
     headers: new Headers({"Content-Type": "application/json"}), 
     body: JSON.stringify({ username: username, 
           password: password}) 
    }) 

    return fetch(request) 
     .then(response => { 
      if (response.status < 200 || response.status >= 300) { 
       throw new Error(response.statusText); 
      } 
      return response.json(); 
     }) 
     .then(({ token }) => { 
      localStorage.setItem('token', token) 
     }); 
    } 
    return Promise.resolve(); 
} 

Для API я с помощью Rails 5.0, при выполнении кода выше и отладки Params на стороне API я не могу получить PARAMS тела, вот результат:

<ActionController::Parameters {"controller"=>"sessions", "action"=>"create"} permitted: false> 

Я попытался изменить отправленные заголовки (Content-Type) запрос на:

... 
headers: new Headers({"Accept": "application/json", 
         "Content-Type": "application/x-www-form-urlencoded"}), 
... 

И отлаживать Params снова на стороне API, и результат:

<ActionController::Parameters {"{\"username\":\"jhon\",\"password\":\"dow\"}"=>nil, "controller"=>"sessions", "action"=>"create"} permitted: false> 

Так как сделать получение PARAMS такой:

ActionController :: Параметры { "имя пользователя" => "Йон", «password» => «doe», «controller» => «session»}, «action» => «create»} разрешено: false>

Answer 1

По умолчанию браузер принимает данные формы, если вы хотите отправить формат json, а затем ypu должны установить свойство json true в методе выборки API, см. ниже -

const request = new Request('http://localhost:9000/login', { 
     method: 'POST', 
     json: true, 
     headers: new Headers({"Content-type": "application/json"}), 
     body: JSON.stringify({ username: username, 
           password: password}) 
    }) 

Answer 2

Если вы хотите, чтобы json интерпретировал ваши символы, вы должны добавить charset=utf-8 для синтаксического анализа.

const request = new Request('http://localhost:9000/login', { 
      method: 'POST', 
      body: JSON.stringify({ username, password }), 
      headers: new Headers({ 'Content-Type': 'application/json; charset=utf-8', 
            'Accept': 'application/json' 
      }), 
}) 

И убедитесь, что вы правильно сохраняете токен. Для меня я не использовал token, поскольку предлагал admin-on-rest, я использовал заголовок ответа с именем access-token, поэтому я сохранил его на localStorage непосредственно в ответе. Возможно, это повлияет на результат вашего кода.

return fetch(request) 
     .then(response => { 
      if (response.status < 200 || response.status >= 300) { 
       throw new Error(response.statusText); 
      } 
      localStorage.setItem('access-token', response.headers.get('access-token')); 
      return response.json(); 
     });