Question

我有一个连接到Rails API的React前端，使用Knock和JWT对用户进行身份验证。我在发布请求中发送电子邮件和密码，然后将令牌（来自响应数据）保留在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，并从头开始重写基本身份验证，同样的问题，即使服务器生成令牌，也无法在对发布请求的响应中找回它。如果我将令牌硬编码到get请求中，则它可以正常工作，并且我可以获取数据。

这是通过Knock安装创建的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"}

我是新来的反应者，所以也许我缺少一些显而易见的东西。

Answer 1

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

"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。

来自React App中axios POST的空响应，Rails服务器显示201状态

1 个答案: