reactjs - 使用 axios 发出的请求不起作用,但如果它适用于 XMLHttpRequest

标签 reactjs axios

我正在使用 axios 从 react 发出请求,该请求如下所示:

const data= axios.post(route, { username:'admin', password:'123' })
              .then(response =>{
                console.log(response)
              })
              .catch(err=>{console.log(err.response)

          })

但它给了我 400 或 401 状态。我认为它与“CORS”有关,但是当我使用 XMLHttpRequest 从 react 发出请求时,它成功了。这里使用 XMLHttpRequest 发出相同的请求:
  var xhr = new XMLHttpRequest();
  var user = "admin";
  var password = "123";

  xhr.open('POST', route, true);
  xhr.addEventListener('load', function() {
    var responseObject = JSON.parse(this.response);
    console.log(responseObject);
    if (responseObject.token) {
          console.log(responseObject.token);
    } else {
          console.log('no');
    }
  });

  var sendObject = JSON.stringify({username: user, password: password});

  console.log('going to send', sendObject);

  xhr.send(sendObject);

如何正确使用 axios 发出请求?

日志:

log

最佳答案

如果在发布请求中设置内容类型参数如何?
你能试一下吗,

let config = {
  headers: {
   'Content-Type':'application/json',
  }
}

let response = await axios.post(route, { username:'admin', password:'123' }, config);
console.log(response);

关于reactjs - 使用 axios 发出的请求不起作用,但如果它适用于 XMLHttpRequest,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59656393/

相关文章:

javascript - 预输入/预测测试功能遇到问题

html - Reactjs:如何将 HTML 放入列表项的 primaryText 中?

javascript - axios ajax,发出ajax请求时显示加载

javascript - 这个 react 路线有什么问题

HTML/CSS 需要帮助在两个元素之间创建下划线

javascript - JS : GET request with added "data" parameter like cURL -d '{key: value, key2: value}'

javascript - Vuejs 和 Axios 进行多次 get 请求

javascript - axios 数据正在破坏请求

javascript - 如何在我的 React 应用程序上使用 axios put 请求更新状态? ( react /Node express )

reactjs - 需要使用react-redux进行身份验证的延迟加载组件