Axios 发布空请求答案

【问题标题】：Axios posting empty requestAxios 发布空请求
【发布时间】：2021-03-15 14:25:15
【问题描述】：

我正在尝试向后端发送一个axios 请求，但它最终有一个空的body，我不明白为什么会这样。这是请求的代码：

axios.post('/register', {email: email, password: password, username: username, company: company}).then(response => {
    console.log(response.data);
});

这是后端的代码：

authRouter.post('/register', (request, response) => {
    console.log(request.body);

});

这个输出一个空的request.body。我还检查了发送的JSON，它根本不是空的。有没有办法在发送之前查看请求的形式？这个authRouter 是一个module.export，被app 主模块使用。这个app 模块有这样的配置：

app.use(express.static("public"));
app.use(session({ secret: "shh", resave: false, saveUninitialized: false }));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(passport.initialize());
app.use(passport.session());

app.set('views', __dirname + '/views');
app.set('view engine', 'pug');

app.use(authRouter);

https.createServer({key: fs.readFileSync('ssl/key.pem'), cert: fs.readFileSync('ssl/cert.pem')}, app).listen(8080);

【问题讨论】：

您是否正确使用body-parser？
你有JSON解析中间件吗？
是的，我编辑了我的问题以包含 app 配置。
我猜body-parser 可能是问题所在，因为在另一种情况下，我使用这个模块没有urlencoded 部分，我没有问题。
或axios 标头问题。我看到我应该使用Content-Type application/x-www-form-urlencoded，但这不是axios 默认吗？

标签： node.js axios

【解决方案1】：

问题在于body-parser 想要x-www-form-urlencoded 请求，而我没有提供。

我已经给它设置了axios请求的header，代码如下：

axios.post('/register', {
  email: email,
  password: password,
  username: username,
  company: company
}, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
  .then(response => {
    console.log(response.data);
  });

【讨论】：

【解决方案2】：

在我的例子中，我在 axios 标头中声明了“Content-Type”：“application / json”。为方便起见，我在 axios 的全局属性中声明。

这样

axios.defaults.headers.common = {
  "Content-Type": "application/json"
}

现在它的作品

【讨论】：

【解决方案3】：

为了解决我的问题，我基本上只能这样做

let config = {
               headers: {
                  'Content-Type': 'application/x-www-form-urlencoded',
               } 
          }

let params = new UrlSearchParam();
    params.append('var1', 'val1');
    params.append('var2', 'val2');

//Finally

axios.post('gotourl', params, config).then( ( response ) => {
      console.log(response.data);
});

More informations

【讨论】：

【解决方案4】：

您可以使用 qs 序列化您的有效负载。

安装：npm i qs

const qs = require('qs');
axios.post('/post/submit-timesheet', qs.stringify({your: 'data'}))
    .then(res => console.log(res))
    .catch(err => console.log(err));

希望这会有所帮助。 :)

【讨论】：

【解决方案5】：

我刚才遇到了同样的问题，我的问题在于 transformRequest 函数：它返回的数据没有 JSON.stringifying 它。这就是 transformRequest func 的样子（在我的例子中是记录器，使用 TypeScript）：

const requestLogger = <D>(url: string, methodName: string) => (data: D): string => {
    console.log(`Request ${methodName} ${url}\n Body:,`, data)
    return JSON.stringify(data);
}

最后我的 post 静态方法看起来像这样：

static baseHeaders: Object = {
        "Content-Type": "application/json"
    };

static post<T, B>({
        url,
        body,
        params = {},
        headers = {},
        needThrowError = false,
    }: IPost<B>): Promise<void | AxiosResponse<T>> {
        const rest = axios.create({
            params,
            baseURL: this.baseUrl,
            headers: {...this.baseHeaders, ...headers},
            timeout: TIMEOUT,
            transformRequest: requestLogger<B>(url, 'POST'),
            transformResponse: responseLogger<T>(url, 'POST'),
        })

        return rest.post(
            url,
            body,
        ).catch((error) => {
            defaultNetworkErrorHandler(error);
            if (needThrowError) {
                throw error;
            }
        });
    };

【讨论】：

【解决方案6】：

 let data = qs.stringify(
              {
              username:this.username,
              password:this.password
          }
          )
          
          axios.post(`${this.$store.state.backendHost}/register`,data,
          {
              headers:{
                   'Content-Type': 'application/x-www-form-urlencoded'
              }
          })

这是我最终得到的代码的最终版本。不使用 qs.stringify() 导致输出类似： { '{"username":"shelly","password":"hell"}': '' } 这是不可取的。另一件事是您可以使用“邮递员”来生成代码

我希望这会有所帮助，我是 stackoverflow 的新手。如有错误请忽略

【讨论】：