从axios api调用中获取空参数，查询和主体(已被卡住3天，注意:只是为了学习新的堆栈)

Question

由于某些原因，它只以空json形式出现，如:{}(如输出中所示)

我希望我能以某种方式访问路由发送的参数。

前端:

let api = axios.create({
baseURL: "http://localhost:5000/validateSignIn",
})
let config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
} 
}
// api.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
export default function TopBar(input){
function postCredentials(un, pw){
let params = new URLSearchParams();
params.append('username', un);
params.append('password', pw);
let getResponse =  api.get('/', params, config)
.then(response=>{
return (response.data)
}).catch()
return getResponse
}
async function validateSignIn(){
let user = document.getElementById("username").value
let success = await(postCredentials(user, document.getElementById("password").value))
console.log(success)
if(success){
input.setState({"name":user})
return input.setSignedIn(true);
}
else{
console.log("invalid login attempt")
}
}
return(
<div className="signInPage">
<div>Enter UserName: </div>
<input type="username" id="username" maxLength="32" autoComplete="off">                
</input>
<div>Enter Password: </div>
<input type="password" id="password" maxLength="32" autoComplete="off">                
</input>
<br />
<button onClick={() => validateSignIn()}>Click to sign in</button>
</div>
)
}

服务器:

const app = express();
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(cors())
app.all("/", function(req, res, next) {
req.header("Origin", "http://localhost:3000/");
return next();
});
app.use('/login', loginRoutes)
app.use('/validateSignIn', SignInRoutes)
const PORT = process.env.PORT || 5000

路线:

const router = express.Router();
export const getSignin = (req, res) => { 
console.log("params:" + JSON.stringify(req.params))
console.log("query:" + JSON.stringify(req.query))
console.log("body:" + JSON.stringify(req.body))
if(!req.username)
res.send(false)
else{res.send(true)}
}

输出:

{
params:{}
query:{}
body:{}
}

注意:我想要的输出将包含从前端可到达的某个地方发送的用户名和密码。我不介意它是body, query, params还是其他地方。

Answer 1

结果是，当使用GET请求时，您不能在正文中发送信息，但在执行POST请求时，它可以工作。在阅读了这里的API文档后发现:https://www.npmjs.com/package/axios axios-api