无法访问从 React 客户端到 Rails api 的 POST 请求中发送的参数
Posted
技术标签:
【中文标题】无法访问从 React 客户端到 Rails api 的 POST 请求中发送的参数【英文标题】:Can't access params sent in POST request from React client to Rails api 【发布时间】:2018-02-15 10:13:51 【问题描述】:我有一个在 localhost:3000
上运行的 React 登录组件。它返回一个表单,在提交时使用 JS fetch()
将其信息发布到运行在 localhost:3001
上的 rails api 中的 SessionsController。我在使用 FormData 对象和自定义 json 之间交替使用;无论哪种方式,我都会遇到同样的问题。我已经通过使用“rack-cors”消除了控制台中的 CORS 错误,但在访问 SessionController 的 create
操作中发布的信息时仍然遇到问题。当我将 binding.pry 放入其中时,这就是我在 params 中的全部内容:
[1] pry(#<SessionsController>)> params
=> <ActionController::Parameters "controller"=>"sessions",
"action"=>"create" permitted: false>
------- 如何获取我的用户名和密码? ----------
登录组件:
import React from 'react'
const Login = () =>
return(
<div>
<h1>Login</h1>
<form id="login-form" onSubmit=(event) => postSession(event)>
<label htmlFor="username">Username </label><br/>
<input type="text" id="username"/><br/>
<label htmlFor="password">Password </label><br/>
<input type="password" id="password"/><br/>
<input type="submit" value="Login"/>
</form>
</div>
)
const postSession = (event) =>
event.preventDefault()
fetch('http://localhost:3001/sessions',
header:
'Accept': 'application/json',
'Content-Type': 'application/json'
,
method: 'post',
body: new FormData(document.getElementById("login-form"))
)
.then((response) => console.log("Post Session Response: ", response))
.catch((error) => console.log("Error in the Post Session fetch: ", error))
export default Login
config/application.js:
module Geohunter2
class Application < Rails::Application
config.middleware.insert_before 0, "Rack::Cors" do
allow do
origins '*'
resource '*', :headers => :any, :methods => [:get, :post, :patch, :options]
end
end
end
end
【问题讨论】:
【参考方案1】:您的表单输入需要name
属性:
<input type="text" id="username" name="user[username]"/><br/>
...
<input type="text" id="password" name="user[password]"/><br/>
然后你就可以在你的控制器中访问params[:user][:username] params[:user][:password]
。
假设您在较新版本的 Rails (4+) 中使用 strong_params
,您的控制器操作中还需要类似的内容。
def new # or whatever action you're posting
Session.create(user_params)
end
private
def user_params
params.require(:user).permit(:username, :password)
end
【讨论】:
以上是关于无法访问从 React 客户端到 Rails api 的 POST 请求中发送的参数的主要内容,如果未能解决你的问题,请参考以下文章
无法将 GraphQL 查询从 Apollo 客户端发送到 Rails GraphQL 后端
Rails 服务器和 React 客户端:尽管来源相同,但 CORS 问题