從 axios api 調用中獲取空參數、采石場和正文（已卡住 3 天，注意：僅用於學習 mern 堆棧的新手）

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