React native fetch 遇到的坑

1、在請求數(shù)據的時候,一般情況下我們會直接提交Content-typejson數(shù)據格式的請求。類似

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

當我開始請求登錄接口的時候,發(fā)現(xiàn)上面的請求方法失效了,想了好多辦法都不知道問題出在哪里,最后試了下抓包,才發(fā)現(xiàn)原來請求登錄接口的時候,content-typeapplication/x-www-form-urlencode,于是我搜了下這方面的知識。我們在提交表單的時候,form表單參數(shù)中會有一個enctype的參數(shù)。enctype指定了HTTP請求的Content-Type。默認情況下,HTMLform表單的enctype=application/x-www-form-urlencoded。application/x-www-form-urlencoded是指表單的提交,并且將提交的數(shù)據進行urlencode。默認情況下,我們所有的表單提交都是通過這種默認的方式實現(xiàn)的。文檔中是有記載的:

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'key1=value1&key2=value2'
}

2、登錄成功后如何獲取headers里面的sessionid的問題。

登錄成功之后,我們可以打印出上面的response,若是需要取出上面的sessionid,我們可以采用下面的方法,寫法可能比較low,但是可以達到目的

//獲取sid
var headers = response.headers.get("set-cookie");
var header = headers.split(";");
var sessionid;
for(var index = 0; index < header.length; index++)
{
    if(header[index].indexOf("JSESSIONID") > -1){
        sessionid = header[index].split("=")[1];
    }
}
//保存
AsyncStorage.setItem('sessionid', sessionid);

3、登錄成功之后,后臺需要根據sessionid來判斷登錄狀態(tài)。當請求的接口是必須登錄之后才能獲得數(shù)據的時候,就不能用傳統(tǒng)的寫法來請求了。javascript使用fetch進行跨域請求時默認是不帶cookie的,所以會造成session失效。那所以在登錄請求的時候需要加上credentials: ‘include’這個字段。

fetch(Api.checkLoginSecurity , {
    credentials: 'include',
    method: 'POST',
    headers:{
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: 'username='+ this.props.userName + '&password=' + this.userPassword
})

在需要登錄后才能獲取數(shù)據的接口也需要加上

fetch(url , {
    credentials: 'include',
    method: 'GET',
})

此處還要強調一下get請求和post請求,經別人提醒,發(fā)現(xiàn)雖然他寫了個body= {*},讓我誤以為是用POST方式,其實body只是參數(shù)的字段,實際上用的還是GET請求,所以把POST改為GET(默認是GET,所以就不需要寫method),因為GET無法在body里傳參,也不需要header,直接把參數(shù)寫在URL里,只有POST才是在body里傳參。

參考:https://blog.csdn.net/meyin/article/details/73776548

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容