反应应用程序中来自axios POST的空响应，rails服务器显示201状态

Posted 2023-03-10

【中文标题】反应应用程序中来自axios POST的空响应，rails服务器显示201状态

【英文标题】：empty response from axios POST in react app, rails server shows 201 status

【发布时间】：2019-01-11 14:31:38

【问题描述】：

我有一个连接到 Rails API 的反应前端，使用 Knock 和 JWT 对用户进行身份验证。我在 post 请求中发送电子邮件和密码，然后将令牌（来自响应数据）保存在 localStorage 中以将其传递给其他功能。

在提交登录表单时，rails 控制台显示状态 201，但我的帖子请求中的响应为空（不是错误）

这是发帖请求：

login () 
   const $ = window.$;
   const email = $("#email").val()
   const password = $("#password").val()
   const request = "auth": "email": email, "password": password
   console.log(request)

   axios.post('api/v1/user_token', request)
     .then(response => 
     console.log(response)
     localStorage.setItem("jwt", response.jwt)
   )
    .catch(error => console.log(error))

在我的 Rails 控制台中，我看到了

Completed 201 Created in 112ms (Views: 0.2ms | ActiveRecord: 0.5ms)

并且在 javascript 控制台中没有错误。

我尝试删除 Knock，并从头开始重写基本身份验证，同样的问题，即使服务器生成一个令牌，我也无法在对 post 请求的响应中取回它。如果我将令牌硬编码到获取请求中，它会起作用并且我会取回数据。

这是从 Knock install 创建的 user_tokens 控制器

module Api::V1
  class UserTokenController < Knock::AuthTokenController
  end
end

还有我的（非常小的）用户模型

class User < ApplicationRecord
  has_secure_password
  has_many :events 
end

(byebug) request.content_type
"application/json"
(byebug) request.format
#<Mime::Type:0x00007fef56c28650 @synonyms=["application/xhtml+xml"], 
@symbol=:html, @string="text/html", @hash=-2331784109630414172>
(byebug) request.accept
"application/json, text/plain, */*"

.rvm/gems/ruby-2.5.1/gems/rack-2.0.5/lib/rack/sendfile.rb
134:         when '', nil
135:         else
136:           env[RACK_ERRORS].puts "Unknown x-sendfile variation: '# 
.type'.\n"
137:         end
138:       end
139:       [status, headers, body]
140:     end
141: 
142:     private
143:     def variation(env)
(byebug) status
201
(byebug) headers
"X-Frame-Options"=>"SAMEORIGIN", "X-XSS-Protection"=>"1; mode=block", 
"X-Content-Type-Options"=>"nosniff", "Content- 
Type"=>"application/json; charset=utf-8", 
"ETag"=>"W/\"6d43c14099bd994119752b6ad84913c1\"", "Cache- 
Control"=>"max-age=0, private, must-revalidate", "X-Request- 
Id"=>"e1004d69-e7ef-4145-8b62-bb86e2325ea8", "X- 
Runtime"=>"1585.123732"

我是新手，所以我可能遗漏了一些非常明显的东西。

【问题讨论】：

请提供您的控制器源和完整的日志输出...这就像看着水晶球:)

尝试发送 Accept 和 Content-Type 标头，并请提供请求的完整 rails 日志。

【参考方案1】：

除了为 React 前端使用 package.json 中设置的代理：

"proxy": 
  "/api/v1": 
  "target": "http://localhost:3001"
   
,

我创建了一个自定义的 axios 组件：

import axios from 'axios'

const instance = axios.create(
  baseURL: 'http://localhost:3001/'
)

export default instance

并禁用了 Chrome 安全工具并能够检索有效令牌。这解决了我在开发环境中遇到的问题，并允许我在每次成功请求后使用令牌更新 localStorage。