axios.post 返回 400 React Native 的错误请求

Question

我从 API 获取令牌，但不幸的是我的 API 返回 400 错误请求。我已经通过 Postman 检查了我的 api，它在那里工作正常。请让我知道解决方案或任何错误。

async componentWillMount(){
 axios.post('http://api.myapiurl.com/token', {
                grant_type: 'PASSWORD',
                username: 'MY_USERNAME',
                password: 'MY_PASSWORD'
            }, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }).then(response => {
                console.log(response.data)
            }).catch(err => console.log("api Erorr: ", err.message))
}

以下回复有误

请求失败，状态码 400 - node_modules\axios\lib\core\createError.js:16:24 in createError - node_modules\axios\lib\core\settle.js:18:6 在解决 - ... 来自框架内部的另外 10 个堆栈帧

Answer 1

使用QueryString.stringify() 解决。我只是将正文传递给QueryString.stringify()，如下所示：

axios.post('http://api.apiurl.com/token', QueryString.stringify({
            grant_type: 'MY_GRANT_TYPE',
            username: 'MY_USERNAME',
            password: 'MY_PASSWORD'
        }), {
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            }
        }).then(response => {
            console.log(response.data)
        }).catch(err => console.log("api Erorr: ", err.response))

Answer 2

尝试使用 fetch 代替，可能是 axios 的一些 bug，你不需要添加任何库，这里是一个例子：

fetch("http://api.myapiurl.com/token", {
  method: "POST", // *GET, POST, PUT, DELETE, etc.
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    grant_type: "PASSWORD",
    username: "MY_USERNAME",
    password: "MY_PASSWORD"
  }) 
})
  .then(res => {
    res.json();
  })
  .then(data => console.log(data))  // ur data is here
  .catch(err => console.log("api Erorr: ", err));

Answer 3

首先从urlhttps://www.npmjs.com/package/react-native-axios安装包axios 然后创建两个服务来处理 get 和 post 请求，以便您可以重用它们

GetService.js

import axios from 'axios'; 
let constant = {
    baseurl:'https://www.sampleurl.com/'
};
let config = {

    headers: {
    'Content-Type': 'multipart/form-data',
    'Accept': 'application/json'
    }
};

export const GetService = (data,Path,jwtKey) => {
    if(jwtKey != ''){
        axios.defaults.headers.common['Authorization'] = 'Bearer '+jwtKey;
    }

    try{
        return axios.get(
                            constant.baseUrl+'api/'+Path, 
                            data, 
                            config
                        );
    }catch(error){
        console.warn(error);
    }
}    

PostService.js

import axios from 'axios'; 
let constant = {
    baseurl:'https://www.sampleurl.com/'
};
let config = {

    headers: {
    'Content-Type': 'multipart/form-data',
    'Accept': 'application/json'
    }
};

export const PostService = (data,Path,jwtKey) => {
    if(jwtKey != ''){
        axios.defaults.headers.common['Authorization'] = 'Bearer '+jwtKey;
    }

    try{
        return axios.post(
                            constant.baseUrl+'api/'+Path, 
                            data, 
                            config
                        );
    }catch(error){
        console.warn(error);
    }
}

下面给出了使用 get 和 post 服务的示例代码

import { PostService } from './PostService';
import { GetService } from './GetService';


let uploadData = new FormData();
uploadData.append('key1', this.state.value1);
uploadData.append('key2', this.state.value2);
//uploadData.append('uploads', { type: data.mime, uri: data.path, name: "samples" });

let jwtKey = ''; // Authentication key can be added here
PostService(uploadData, 'postUser.php', jwtKey).then((resp) => {
this.setState({ uploading: false });
    // resp.data will contain json data from server
}).catch(err => {
    // handle error here
});



GetService({}, 'getUser.php?uid='+uid, jwtKey).then((resp) => {
    // resp.data will contain json data from server
}).catch(err => {
    // handle error here
});

来自我的另一篇帖子Post action API with object parameter within the URL的参考 如果您有任何疑问，请随时了解

Answer 4

据我所知，您正在发送 json 数据，但您的 Content-Type 标头设置为 application/x-www-form-urlencoded; charset=UTF-8。如果您的 api 需要 json，那么它应该是 application/json。