Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?
@HIJIKI

axios & Django REST framework でJSONをGET/POST

More than 1 year has passed since last update.

前回の記事↓
Django REST framework でJSONをGET/POST/PUT/DELETE

サーバーサイドは前回の記事で作ったものを利用します

axiosの導入

クライアントサイドからのhttp通信にはaxiosを使います

$ npm install axios --save-dev

クライアントサイド内のaxiosを使うファイルには以下を追記しておきます

import axios from 'axios'

GET

クライアントサイドのGETしたい場所に以下を記述します

axios.get("http://localhost:8000/api/books/")
    .then(response=>{
      console.log("status:",response.status)
      console.log("axiosGetData:",response.data)
    })
    .catch(err=>{
      console.log("axiosGetErr",err)
    })

サーバーサイドを起動した状態で、クライアントサイドを実行してみてください

chromeの開発者モードでコンソールを開いてクライアントサイドのログを確認してみると
Access to XMLHttpRequest at 'http://localhost:8000/api/books/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

こんなエラーメッセージが出力されているかと思います

CORSというのはCross-Origin Resource Sharingの略で、異なるオリジンへの通信を行うことです
脱・とりあえず動く[CORS編] - Qiita

オリジンとは「プロトコル」+「ホスト」+「ポート番号」の組み合わせのことです

異なるオリジンへの通信をすべて許可してしまうと、セキュリティ的に問題が出てきます
そのため、特定のurlからの通信のみ許可する必要があります

django-cors-headersの設定で軽くハマった話。 - 自称フルスタックエンジニアのぶろぐ。

サーバーサイドにdjango-cors-headersをインストールします

$ pip install django-cors-headers

settings.py内の INSTALLED_APPという項目にcorsheadersを追記します

settings.py
.....

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp',
    'rest_framework'
+   'corsheaders'                    #追加行
]
.....

MIDDLEWAREにも2つ追加します

settings.py
.....

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+   'corsheaders.middleware.CorsMiddleware',                   #追加行
+   'django.middleware.common.CommonMiddleware',               #追加行
]
.....

また新しくCORS_ORIGIN_WHITELISTという項目をsettings.py内に作成します

settings.py
.....

CORS_ORIGIN_WHITELIST = (
    'localhost:3000/',
    'localhost:3000',
)
.....

apiにアクセスする許可をクライアントサイドに与えました
ポート番号の部分はそれぞれの環境に合わせてください

これでもう一度GETしてみてください

image.png

jsonを取得できました

POST

クライアントサイドのPOSTしたい場所に以下を記述します

axios.post("http://localhost:8000/api/books/",{"title":"urasima tarou","contents":"ryu-gu no tsukai"})
    .then(response=>{console.log("body:",response.data)})

サーバーサイドを起動した状態で、クライアントサイドを実行してみてください

プラウザのコンソールにPOSTしたデータが表示されます

image.png

確認のためにもう一度GETしてみましょう

image.png

データベースに id:4 が追加されていることを確認できました

17
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
HIJIKI
学生/フルスタックエンジニア目指してます/マッスルエンジニアリング/毎秒投稿卍 <br> 本当に助けになるのは「まとめ記事よりもハウツー記事」というコンセプトで活動

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
17
Help us understand the problem. What is going on with this article?