Неверные параметры запроса: неверное кодирование% при загрузке файла на сервер Rails api only

Question

Я работаю над веб-приложением, которое использует Reactjs в качестве внешнего интерфейса и Rails5 api only приложение в качестве фона

Это данные, которые я отправляю на сервер как Request payload

------WebKitFormBoundaryCD1o71UpVNpU4v86
Content-Disposition: form-data; name="user[username]"

oeuoeoaeaoe
------WebKitFormBoundaryCD1o71UpVNpU4v86
Content-Disposition: form-data; name="user[profile_image]"; filename="gggg.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryCD1o71UpVNpU4v86--

Это мой контроллер

def update_with_image
    user = current_user
    if user.update_attributes(user_update_params)
      # Handle a successful update.
      render json: user, status: 200
    else
      render json: { errors: user.errors }, status: 422
    end
  end


  private

  def user_update_params
    params.require(:user).permit(:username,:profile_image)
  end

Поэтому, когда я попытался загрузить изображение на сервер Rails, я получил эту ошибку

ActionController::BadRequest (Invalid request parameters: invalid %-encoding ("user[username]"

oeuoeoaeaoe
------WebKitFormBoundaryCD1o71UpVNpU4v86
Content-Disposition: form-data; name="user[profile_image]"; filename="gggg.jpg"
Content-Type: image/jpeg

????JFIF????@6"??

??F!1AQ "aq?
#2???B?????$3Rb?%Cr??????       ??A!1A"Qaq?2???BR???#b??3rS?$Cs????
                                                                   ??%)):

rack (2.0.1) lib/rack/query_parser.rb:72:in `rescue in parse_nested_query'
rack (2.0.1) lib/rack/query_parser.rb:61:in `parse_nested_query'

** Я использую Rack::Cors а также Rack::Attack как мое промежуточное ПО

Как я могу это исправить?

Спасибо!

Answer 1

Потратил один день на эту проблему.

Правильный ответ здесь: /questions/51689796/rails-6-spa-activestorage-nedopustimyie-parametryi-zaprosa-nedopustimaya-posledo/51689806#51689806

Не устанавливайте Content-Type заголовок, когда вы используете выборку для публикации multipart/form-data на сервер API Rails.

НЕПРАВИЛЬНО

      // this is not working
fetch(
  url,
  {
    method: 'POST', // or 'PUT'
    headers: {
       'Content-Type': 'multipart/form-data'
    },
    /*
    * or
    * headers: {
    *   'Content-Type': '',
    *   'Content-Type': undefined,
    *   'Content-Type': null,
    * },
    */
    body
  }
);

ВЕРНЫЙ

      fetch(url, {
   method: 'POST',
   headers: {},
   body
});

// or delete headers['Content-Type'] if necessary

Answer 2

Я также столкнулся с этим, и мне нужно было удалить объявление составного заголовка. Полный пример:

HTML:

      <input
  type="file"
  onChange={(e) => {
    if (e?.target?.files && e.target.files[0]) {
      handleImageFile(e.target.files[0]);
    }
  }}
/>

JS:

      const handleImageFile = (file) => {
  const fd = new FormData();
  fd.append("user_id", 171);
  fd.append("avatar", file);
  fetch("/user/avatar/", {
    method: "POST",
    body: fd,
    headers: {
      Accept: "application/json",
      "X-Requested-With": "XMLHttpRequest",
      "X-CSRF-Token": document.querySelector("meta[name=csrf-token]")?.getAttribute("content"),
    },
  })
    .then((result) => {
      console.log(" * result", result);
    })
    .catch((err) => {
      console.warn(" * error", err);
    });
};

Контроллер:

      def user_avatar
  user = User.find(user_avatar_params[:user_id])
  user.avatar = user_avatar_params[:avatar]
  user.save!
end

def user_avatar_params
  params.permit(:user_id, :avatar)
end