発生している問題・実現したいこと
・事象
responseに文字列が帰ってきているが、取得できない。
・期待値
axiosから返された文字列をresponseとして取得したい。(現状nullが帰ってしまう)
例.
console.log(response.data) //data:image/jpeg;base64,/9j/4AAQSkZJR...
該当のソースコード
react
1const REACT_APP_HOST = process.env.REACT_APP_HOST; //http://localhost:8080/ 2 3const generateHeader = apiToken => ({ 4 headers: { Authorization: `Bearer:${apiToken}` }, 5}); 6 7const getImage = (id, imagePath, apiToken) => { 8 const product = productApi.get(`/${id}` + `/images` + `/${imagePath}`, generateHeader(apiToken)); 9 return product; 10};
react
1、、、上省略 2const newProducts = this.state.products; 3const apiToken = this.state.apiToken; 4 5await Promise.all( 6 newProducts.map(async product => { 7 const response = await productApi.getImage(product.id, product.imagePath, apiToken); 8 console.log(response.data) //nullが帰って来てしまう 9 }) 10 ); 11 12、、、下省略
試したこと
react
1const REACT_APP_HOST = process.env.REACT_APP_HOST; //http://localhost:8080/ 2const getImage = (id, imagePath, apiToken) => { 3axios.get(REACT_APP_HOST + 'api/products' +`/${id}` + `/images` + `/${imagePath}`,{ 4headers: { 5Authorization: `Bearer:${apiToken}`, 6}, 7responseType: 'arraybuffer' 8}) 9}; 10
responseType: を'arraybuffer'に変更したが変わらなかった
補足情報
分からない部分や補足が必要な部分はお申し下さい!
何卒よろしくお願い致します。
java は全く関係がないと思いますが。
javascript と java はなんの関係もないです。
`console.log(response.data)`ではなく`console.dir(response)`でレスポンスの中身を全部確認してみましょう。
200以外のステータスが返ってきているかもしれないし、Promiseが返ってきている可能性もあります。
@hope_mucci
ご返信ありがとうございます!
responseの中身を上記に追加致しました。ステータスは200が帰って来ているのですがdataはnullといった感じになってしまいますね。
上記画像の情報からおかしな部分はございますでしょうか?
`request`も展開して`response`や`responseText`を参照してみてください。ここにはサーバから送信されたデータそのままが入っているはずです。
responseTextの中を参照すると
DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json')
このようなメッセージが書かれていました。
つまりresponseの中身がjsonではなくtext/plainになっているため読み取れないということでしょうか?
サーバーサイド側(Java)の問題ということなんですかねぇ...
responseTypeをtextに変換すると取得することができました!
大変参考にさせていただきました!
ありがとうございました><
回答1件
あなたの回答
tips
プレビュー