如何在react native应用程序中获取带有头的api(POST)

Question

我试图在对特定api的post请求中放入三个param，但我没有得到预期的响应。API在我的Postman中运行良好，但我不确定我在react原生应用程序中的获取方法。我是新手，所以我不知道如何在我的API请求中放入头。我遵循了一些文档，但没有得到太多。请看一看并回答我的问题。

constructor (props) {
super (props)
this.state = {
detail: ''
}
}
ComponentDidMount(){
var data = new FormData();
data.append('mobile_number','8615351655')
data.append('mobile_country_code','+21')
data.append('rec_name','Shantanu Talwaar')
}
fetchData = async() => {
fetch('http://link.com/link/',
{
method: 'POST', 
headers:{
//this what's exactly look in my postman
'Authorization': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb;
},
body: this.data
})
.then((response) => response.json())
.then((responseJson) => {
alert(responseJson.detail)
}).catch((error) => {
alert('error')})}
render() {
return (
<View style = {styles.container}>
<Button onPress = {this.fetchData} title = "fetch"/>
<Text style={styles.text}>Fetched data displays below</Text>
<Text style={styles.text}>{this.state.detail}</Text>
</View>
)
}
}

这是我现在在警报框中看到的结果："未提供身份验证凭据。">

Answer 1

您的令牌后面缺少一个'。

'Authorization': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb;

由于它是一个JSON对象，您应该删除分号

因此，最终代码将是

'Authorization': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb'

还有另一个问题。无法从fetch函数访问数据声明。所以你应该这样做。

fetchData = async() => {
var data = new FormData();
data.append('mobile_number','8615351655')
data.append('mobile_country_code','+21')
data.append('rec_name','Shantanu Talwaar')
fetch('http://link.com/link/',
{
method: 'POST', 
headers:{
//this what's exactly look in my postman
'Authorization': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb'
},
body: data
})
.then((response) => response.json())
.then((responseJson) => {
alert(responseJson.detail)
}).catch((error) => {
alert('error')
})
}

Answer 2

我认为您可以使用"x-access-token"作为身份验证令牌的头名称，并放置Content-Type。

fetchData = () => {
fetch('http://link.com/link/',
{
method: 'POST', 
headers:{
'Content-Type': "application/json",
'x-access-token': 'Token 97a74c03004e7d6b0658dfdfde34fd6aa4b14ddb'
},
body: this.data
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson.detail)
}).catch((error) => {
alert('error')})
}