Django(rest_framework)で作成したAPIをReactで取得できません。
(Reactではaxiosを利用中)
APIが取得できているか、Reactで作成したホストのでペロッパーツールで確認をすると以下の通り2つのエラーが表示されます。
①エラー1つめ
GET http://localhost:8000/api/questions net::ERR_CONNECTION_REFUSED
②エラー2つめ
Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:84)
DjangoとReactで以下の通りコードを記載していますが、不足や誤りがありましたらご教示のほどよろしくお願い申し上げます。
Python
1(Django:settings.py) 2 3INSTALLED_APPS = [ 4 'rest_framework', #APIを作る 5 'corsheaders', #ホスト間でdjangoのホストへアクセスできるようにする 6] 7 8MIDDLEWARE = [ 9 'corsheaders.middleware.CorsMiddleware', 10 'django.middleware.common.CommonMiddleware', 11] 12 13 14CORS_ORIGIN_WHITELIST = [ 15 'http://localhost:3000', 16 'http://localhost:3000', 17 'http://127.0.0.1:3000', 18 'http://127.0.0.1:3000', 19] 20 21#レスポンスを公開? 22CORS_ALLOW_CREDENTIALS = True 23
APIのURLは以下の通りです。
ターミナルでは無事APIの値を取得できています。
http://127.0.0.1:8000/api/questions/
続いてReactのコードです。
React
1 2import axios from "axios"; 3 4//DjangoのAPIを取得してデベロッパーツールに表示させる 5const Form = () => { 6 const getApi = (e) => { 7 e.preventDefault(); 8 axios.get("http://localhost:8000/api/questions").then(res => console.log(res)) 9 } 10 return( 11 <form> 12 <button type="submit" onClick={getApi}>Get API !</button> 13 </form> 14 ); 15} 16 17export default Form; 18
分かりづらい説明で恐れ入りますが、よろしくお願い申し上げます。
あなたの回答
tips
プレビュー