关于Node.Js报错“Column ‘username‘ cannot be null”

最新推荐文章于 2023-11-13 10:17:40 发布

w1209398525

最新推荐文章于 2023-11-13 10:17:40 发布

阅读量490

点赞数

文章标签： node.js 前端 vue

本文链接：https://blog.csdn.net/w1209398525/article/details/132121641

版权

开发者在使用axios进行前后端交互时遇到问题，后端未接收到前端传递的数据。通过测试发现是由于请求方式的问题，需将Content-Type设置为x-www-form-urlencoded并使用qs库进行数据格式化。通过添加请求拦截器解决了数据解析问题。

摘要由CSDN通过智能技术生成

最近正在进行一个登陆注册案例的开发，在我封装好nodejs后端接口并且用postman测试登陆注册功能没问题后开始进行axios的封装。然而当我志在必得的时候，发现前端报了一个错误

检查后端并且打印前端返回的数据，发现数据根本没有接收到

于是我就认为是前端的传参出了问题，更改了一遍又一遍前端的代码后发现仍然无济于事，然后我再次去postman测试接口，在我将请求方式换为raw之后，发现报了一样的错误。因此确定了错误原因。---数据格式没有得到服务端的正常解析

我们需要做的就是将前端的请求方式换为可以解析的x-www-form-urlencoded方式，就需要做一个请求拦截器：

我们需要安装一个“qs”库来解析我们需要的格式

命令行输入pnpm add qs 即可。

import axios from 'axios';
import qs from 'qs';

const instance = axios.create({
  baseURL: 'http://localhost:3000'
});

// 拦截器：请求发送前的处理
instance.interceptors.request.use(config => {
  // 修改请求头为 x-www-form-urlencoded
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded';

  // 对请求数据进行格式化
  if (config.data && config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
    config.data = qs.stringify(config.data);
  }

  return config;
});

export default instance;

拦截到前方传回来的请求，以正确的格式发往后端，就能得到正确的解析了。