Rails API 空请求标头

Question

Sending request from javascript to rails and providing the Authorization header with a token always shows up as empty headers on my rails API.

I have the follow piece of base code for all my API controllers:

module Api
 class BaseController < ActionController::API
  before_action :require_login

  private

  def require_login
   unless signed_in?
    head :unauthorized
   end
  end

  def signed_in?
    current_user.present?
  end

  def current_user
    if request.headers['Authorization'].present?
      User.find_by(token: request.headers['Authorization'])
    else
      nil
    end
  end
end

end

Doing my fetch request on javascript side like this:

  fetch(`/api/clients?page=${page}`, {
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      'Authorization': AUTH_TOKEN
    },
    credentials: 'same-origin',
  })

Fetching the value Authorization from request.headers always comes up as nil.

Anyone knows what might be going wrong?

Answer 1

Since you're using the Fetch() library, you can use the new Request() object which helps you customize your configurations.

// https://developer.mozilla.org/en-US/docs/Web/API/Request/Request

var myHeaders = new Headers({
    "Content-Type": "application/json",
    'Authorization': AUTH_TOKEN
});

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request(`/api/clients?page=${page}, myInit);

fetch(myRequest).then(function(response) {
  ...
});

I had the same issue with Axios and it turns out I was using a get request with headers and params wrongly .

const params = { id: "ghjfsd7634" };

const headers = {
    headers: {
        "Content-Type": "application/json",
        Authorization: token,
    },
};


 axios
      .get(url, params, headers)
      .then(function foo(response) {
          handleResponse(response.data);
      })
      .catch(function foo(error) {
          console.log("GET Resource Error");
          console.log(error);
      });

Correct way: Params and headers in get requests are passed differently compared to post , put etc. requests. Axios takes the entire config in the second argument, not a list of config objects. Put the params inside the config, and pass the entire object as the second argument :

 const params = { id: "ghjfsd7634" };
 const headers = {
     "Content-Type": "application/json",
     Authorization: token,
 };

 const config = { headers, params };

 await axios
     .get(url, config)
     .then(function foo(response) {
         handleResponse(response.data);
     })
     .catch(function foo(error) {
         console.log("GET Resource Error");
         console.log(error);
     });