使用axios时出现400错误的坏请求

Question

我正在使用axios，但是遇到了400坏请求错误。我正在使用react-redux尝试向localhost:3000/posts发送一个POST请求。这是我正在使用的代码。

import axios from 'axios';
import {
  GET_ALL_POSTS,
  GET_POST,
  CREATE_POST,
  DELETE_POST,
  UPDATE_POST
} from './types';

const ROOT_URL = 'http://localhost:3000';

export function createPost({content, title}, cb) {
  return function(dispatch) {
    axios.post(`${ROOT_URL}/posts`, {content, title})
      .then((response) => {
        console.log(response);
        dispatch({
          type: CREATE_POST,
          payload: response
        });
      })
      .then(() => cb())
      .catch((error) => {
        console.log("Problem submitting New Post", error);
      });
  }
}

- user7366497

---

提交新帖子时出现问题，错误为：请求失败，状态码为400。 在bundle.js的29014行创建错误， 在bundle.js的37974行解决错误， 在bundle.js的28850行处理XMLHttpRequest的加载。如果我使用console.log(req)，我甚至无法到达那个点。就好像没有任何东西被发送到服务器一样。@skwidbreth - user7366497

这一部分看起来有些可疑，因为你的元素没有元素名称 {content, title}。也许首先值得尝试硬编码请求为类似{content:"hello",title:"world"}，以查看是否修改了400错误？或者可能只使用一个元素 axios.post(url,content).then... 试试。 - GregHNZ

@GregHNZ 我尝试了所有方法，但仍然遇到了400错误请求。 - user7366497

@GregHNZ 我使用了Postman并向localhost:3000/posts发送了请求，但仍然收到了错误请求，因此可能不是axios的问题。 - user7366497

听起来像是CORS问题。尝试使用Chrome扩展程序：Allow-Control-Allow-Origin: *。 - genestd

Answer 1

我也遇到了这个错误，问题既不是服务器的问题，也不是axios或代理网址的问题。问题是我没有从我的React应用程序中发送正确的数据。

例如，我应该发送： { email: '[e-mail]', password: 'asdf' } 而我发送的是： { name: '[e-mail]', password: 'asdf' } 这导致API无法理解名称字段，因为我在API中提供了电子邮件作为键。因此，如果您仍然面临此问题，请尝试检查您是否发送了正确的数据。

- Ibtisam Ur Rehman

---

太能理解了！我发送了一个原始的查询字符串，忘记在最后加上“=”。例如，“?id123”而不是“?id=123”。 - testing_22

Answer 2

每个POST请求，客户端首先发送一个OPTIONS请求来检查服务器是否准备好接受连接。您还应该允许服务器接受选项请求。如果您没有允许，请在Node服务器中使用下面的行。

app.use(function(req, res, next) { res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); next(); });

app.use(function(req, res, next) {
   res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
      next();
});

- sakhib