3/3-4

ReactでdjangoのAPIを取得する

 

Django側

  • CORSのインストール
    • Django側で行う

    • docker-compose exec backend pip install django-cors-headers

  • プロジェクト/settings.pynosettei
    • CORSを設定する
    • INSTALLED_APPS=
      • 'corsheaders',を加える
    • MIDDLEWARE=
      • 'corsheaders.midddleware.CorsMiddleware'を加える
    • CORS_ORIGIN_WHITELIST=の新規作成
      • 'htttp://localhost:3000'を加える

 

React側

  • src/components/DrfAPIFetch.jsを作る
    • import React,{useState,useEffect} from 'react'
      import axios from 'axios'


      const DrfAPIFetch = () => {

      const [tasks,setTasks]=useState()

      useEffect(()=>{
      headers:{
      "Authorization":"Token トークン"
      }
      })
      .then(res =>{setTasks(res.data)})
      },[])

      return (
      <div>
      <ull>
      {
      tasks.map(task=><li key={task.id}>{task.title} {task.id}</li>)
      }
      </ull>
      </div>
      )
      }

      export default DrfAPIFetch
    • あ
    •  
  • src/App.js
    • DrfAPIFetchを読み込んでタグを作る