带饼干 - ruby on Rails和Reactjs

Question

我可以在登录响应中看到set-cookie。 但是我在开发人员工具中无法在应用程序 - > cookies选项卡下找到它。 我读到的某个地方，如果httponly：true是设置的，您将看不到令牌，所以我试图对后端进行API调用以检查cookie是否在我没有收到它，我在控制台中检查了cookie。 如果可能的话，请提及如何检查cookie，我可能会在后端检查错误。 我正在添加CORS设置和cookie设置，我拥有

Rails.application.config.session_store :cookie_store,
                                   key: 'F1Sodharas',
                                   domain: 'localhost', # PRODUCTION CHANGE
                                   same_site: :none,
                                   secure: Rails.env.production?,
                                   httponly: true

-login方法和设置cookies

def login
  @user = User.find_by(email: params[:email])
  if @user&.authenticate(params[:password])
    token = jwt_encode(user_id: @user.id)
    cookies.signed[:jwt] = {
      value: token,
      expires: 24.hour.from_now
    }
    log_session(token)
    render json: { message: 'Login Successfull', user: UserSerializer.new(@user).serializable_hash[:data] },
             status: :ok
  else
    render json: { message: 'Email And Password Are Not Matching' }, status: :unauthorized
  end
end

这是Axios请求

export const getUser = async () => {
    try {
        const response = await axios.get("http://localhost:3000/user/show", {withCredentials: true});
        if (response.status === 200) {
            return response.data;
        } else {
            return null;
        }
    } catch (error) {
        console.error("Error while fetching user data", error);
    }
}

这是我的cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:5173' # PRODUCTION CHANGE

    resource '*',
             headers: :any,
             methods: %i[get post put patch delete options head],
             credentails: true
  end
end

要在前端正确设置的cookie，因为我在应用程序 - > cookie部分下找不到它们？

Aam，我将cookie发送到getuser呼叫的后端？

请提及如何在后端检查cookie。
    

sissue：

您正在将cookie设置在轨道上，但在

开发器工具→应用程序→cookie

中无法看到它们，并且没有随后的请求发送cookie。

可能的原因和修复 CORS配置（

credentails: true

）

Answer 1

1Thipo 您的CORS设置在

credentials: true

中具有一个typo

（您写了credentails）。这将导致凭据（包括cookie）

not

---

。

✅fix：

更新您的CORS配置：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:5173' # PRODUCTION CHANGE

    resource '*',
             headers: :any,
             methods: %i[get post put patch delete options head],
             credentials: true  # ✅ Corrected typo
  end
end

2️⃣⃣确保饼干在开发中具有

secure: false

您的会话商店的配置为：

Rails.application.config.session_store :cookie_store,
                                   key: 'F1Sodharas',
                                   domain: 'localhost', # PRODUCTION CHANGE
                                   same_site: :none,
                                   secure: Rails.env.production?,
                                   httponly: true

🚨sissue：

在开发中，意味着cookies只能通过HTTPS发送生产。由于

secure: Rails.env.production?是http，因此cookies不会存储在浏览器中。 ✅fix：

确保通过设置cookie在开发中起作用

localhost：

secure: false🚀

---

🚀注：

在生产中，保持

Rails.application.config.session_store :cookie_store,
                                   key: 'F1Sodharas',
                                   domain: 'localhost', # PRODUCTION CHANGE
                                   same_site: :none,
                                   secure: false,  # ✅ Change to false in development
                                   httponly: true

执行https.

the浏览器中的cookie

如果是设置的，cookie cookies却不在开发人员工具中出现，因为它们无法访问JavaScript。

✅✅instead，通过以下方式检查cookie：

开发人员工具中的网络标签： go到

network

→查找login请求

检查响应标题→寻找

secure: true

Console（请求在请求中发送的cookie）：

run：

httponly: true

---

如果cookie是Application → Cookies，这不向他们展示。

toxpect Out of Outoutreasts：

登录后，检查

GET /user /show

请求。

开发人员工具中的requrequest标题→cookie

1. 4️⃣⃣确定cookie是在请求中发送的 您的Axios请求
   应包括您正确设置的
   • Set-Cookie： document.cookie
   ✅
   • ✅additional检查：如果后端仍然没有接收cookie，请尝试在Axios中全球设置：

     httponly

   5Thifycookie cookie in Rails Backend
2. 要检查cookie是否是由后端接收到的cookie，请在控制器中添加调试：
   { withCredentials: true }

   • 🔍检查日志：

     • 行

       export const getUser = async () => {
           try {
               const response = await axios.get("http://localhost:3000/user/show", { withCredentials: true });
               if (response.status === 200) {
                   return response.data;
               } else {
                   return null;
               }
           } catch (error) {
               console.error("Error while fetching user data", error);
           }
       }

       并在提出请求时查找日志输出。
     ✅最终清单
   ✔fix cors typo（
withCredentials: true
3. ） 开发中的
   axios.defaults.withCredentials = true;
   • 集

     def show
       Rails.logger.info "Cookies received: #{request.cookies.inspect}"
       render json: { message: 'User fetched' }
     end

     ✔
   检查cookie通过网络选项卡，而不是应用程序选项卡
   • ✔确定rails server
   在Axios
设置 Rails Logs中的Debug Cookie

---

希望这有帮助！ 🚀让我知道您是否需要进一步澄清。