我需要从 Vue（SPA）发送一个 json obj 到节点（服务器）

Posted 2023-02-22

【中文标题】我需要从 Vue（SPA）发送一个 json obj 到节点（服务器）

【英文标题】：I need to send a json obj from Vue(SPA) to node(server)

【发布时间】：2019-03-11 13:11:26

【问题描述】：

我正在尝试使用 Axion 将表单从 vue 应用程序发送到节点服务器。 但我无法在服务器端的请求中得到任何东西。 我在 vue 中有用户名和密码，但我无法将其发送到服务器进行处理，另外我可以得到 x-www-form-urlencoded 类型的 Postman 响应并查看服务器正常工作。 我尝试更改“Content-Type”的类型，但仍然没有得到任何东西

---

服务器端。

服务器：

    router.options('/login',function(request, response, next) 
console.log(request.body);
    var login = methods.login(request.body.nationalID, request.body.password)
        .then((result) => 
            response.status(200).send(
                success: true,
                roles:   result.roles,
                token:   result.token
            )
        ).catch((err) => 
            response.status(err.code).send(
                success: false,
                message: err.message
            )
        )
);

router.post('/login',function(request, response, next) 

    console.log(request.body);
    var login = methods.login(request.body.nationalID, request.body.password)
        .then((result) => 
            response.status(200).send(
                success: true,
                roles:   result.roles,
                token:   result.token
            )
        ).catch((err) => 
            response.status(err.code).send(
                success: false,
                message: err.message
            )
        )
);

和服务器配置：

app.use(bodyParser.json()); // <--- Here
app.use(bodyParser.urlencoded(extended: false));
app.use(express.json());
app.use(express.urlencoded( extended: false ));

客户端：

const requestOptions = 
        method: 'POST',
        headers:  'Content-Type': 'application/json' ,
        body: JSON.stringify(nationalID:username, password:password)
    ;

    return axios.post('http://127.0.0.1:3000/user/login', requestOptions)
        .then(handleResponse)
        .then(user => 
            // login successful if there's a jwt token in the response
            if (user.token) 
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('user', JSON.stringify(user));
            

            return user;
        );

【问题讨论】：

顺便说一句，您的服务器端 options 代码部分不应与 post 代码部分相同。当客户端发送OPTIONS 请求时，服务器不应该做任何实际工作，而是以允许的方式回复与给定 URL 交互。请参阅：developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS。通常这用于支持 CORS 预检请求。无论如何，它不应该实际登录用户。

另外一点，考虑使用cookie来存储登录令牌，而不是本地存储。在 cookie 上设置 secure 和 httpOnly 标志以确保客户端 A) 需要 HTTPS 连接并且 B) 阻止任何 javascript 读取 cookie。这可以防止登录 cookie 被盗，并且客户端将自动在每个请求中使用它。在这里更好的解释：scottksmith.com/blog/2014/09/04/…

当然secure 仅在您拥有 HTTPS 时有效，但您明白了。存储在本地存储中的敏感数据可能会被窃取或操纵，例如通过恶意浏览器扩展。此外，客户端应用程序代码实际上并不需要知道登录令牌的实际内容即可运行。尽可能严格地分离代码和令牌是一个很好的策略。

【参考方案1】：

您过度使用了请求选项。

x-www-form-urlencoded 内容类型是 axios.post()（以及几乎所有其他现有的 HTTP 库）的默认值，并且不需要 JSON.stringify() 任何内容。毕竟，您不想将 JSON 发送到服务器，而是发送表单编码的数据。

直接发布一个对象：

return axios.post('http://127.0.0.1:3000/user/login', 
    nationalID: username,
    password: password
)
    .then( ... )