Axios发布空请求

lh80um4z 于 2023-01-20 发布在 iOS

关注(0)|答案(7)|浏览(223)

我尝试向后端发送一个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);

axios

来源：https://stackoverflow.com/questions/51143730/axios-posting-empty-request

7条答案

按热度按时间

kuuvgm7e1#

问题来自body-parser需要一个x-www-form-urlencoded请求，而我没有提供一个。
我已经将axios请求的头文件设置为它，代码如下所示：

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);
  });

赞(0）回复(0）举报 2023-01-20

euoag5mw2#

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

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

现在它的作品

赞(0）回复(0）举报 2023-01-20

3zwtqj6y3#

为了解决我的问题，我不得不这样做

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);
});

更多信息

赞(0）回复(0）举报 2023-01-20

j9per5c44#

可以使用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));

希望这对你有帮助

赞(0）回复(0）举报 2023-01-20

jk9hmnmh5#

我刚才已经堆栈了相同的问题，我的例子中的问题是在transformRequest函数中：它返回数据时不使用JSON。将其字符串化。这就是transformRequest函数的外观（在我的示例中使用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方法是这样的：

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;
            }
        });
    };

赞(0）回复(0）举报 2023-01-20

tyg4sfes6#

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"}': '' }，这是不可取的。另一件事是，您可以使用“postman”来生成code