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

IT技术 reactjs react-native axios expo
2021-05-14 19:43:06

我从 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 in set - ... 10 多个堆栈帧从框架内部

邮递员截图

4个回答

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

尝试使用 fetch 代替,可能是一些 axios 错误,您不需要添加任何库,这是一个示例:

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

它是通过使用解决的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))

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

获取服务.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);
    }
}    

邮政服务.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 in the URL 如果您有任何疑问,请随时知道