javascript - 在 axios 请求中包含密码的安全方法是什么？

Question

我正在构建一个属性搜索应用程序，要访问属性，您需要传递 token 并获取 token ，我已获得用户名和密码。

我正在尝试请求 token ，该 token 需要与 header 一起发送的用户名和密码。

我正在使用 axios 来处理这个 post 请求。

        let tokenURL =  process.env.REACT_APP_TOKEN;
        let username = process.env.REACT_APP_USERNAME;
        let password = process.env.REACT_APP_PASSWORD;

        const user = new URLSearchParams()
        user.append('username', username)
        user.append('password', password)
        return await  axios.post(tokenURL, user)
            .then(function (response) {
                localStorage.setItem('token', response.data.token)
                return response.data.token
            })

    }

但问题是，当我检查代码时，我可以看到用户名和密码被暴露(显然)。那么处理这个请求的最佳方法是什么？

Answer 1

我通过创建服务器端文件 auth.php 解决了这个问题，现在我不再在 React 应用程序中调用 tokenURL，而是调用返回 token 的 auth.php url。

不确定这是否是最好的方法，但至少不会以这种方式暴露用户名和密码

<?php
$url = 'http://example/login_check'; 


$data = array('username' => 'xxx', 'password' => 'xxx');

// use key 'http' even if you send the request to https://...
$options = array(
    'http' => array(
        'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
        'method'  => 'POST',
        'content' => http_build_query($data)
    )
);
$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);
if ($result === FALSE) { echo 'err'; }
echo json_decode($result)->token;