使用axios和Django REST框架来进行JSON的GET/POST请求

上一篇文章↓
使用Django REST framework来进行JSON的GET/POST/PUT/DELETE

服务器端将使用上一篇文章中所创建的东西。

引入axios

在客户端使用axios进行HTTP通信。

$ npm install axios --save-dev

在使用axios的客户端文件中，添加以下内容。

import axios from 'axios'

获得 (huò dé)

在客户端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的开发者模式下，打开控制台并查看客户端的日志，你会发现从源’http://localhost:3000’到’http://localhost:8000/api/books/’的XMLHttpRequest请求被CORS策略阻止了：请求的资源上缺少’Access-Control-Allow-Origin’标头。

你可能会看到类似的错误信息

CORS指的是跨域资源共享，即进行与不同来源的通信。
《脱・暂时可用——CORS版》- Qiita

“Origin” 是由 “协议”+“主机”+“端口号”组成的组合。

如果允许与不同的来源进行所有通信，会带来安全问题。
因此，只有允许特定URL的通信才是必要的。

在 Django-CORS-Headers 的设置中遇到了一些问题 – 自称全栈工程师的博客。

请在服务器端安装django-cors-headers。

$ pip install django-cors-headers

我們將在 settings.py 檔案中的 INSTALLED_APP 項目中添加 corsheaders。

.....

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中添加两个组件。

.....

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',               #追加行
]
.....

我们还将在settings.py文件中创建一个名为CORS_ORIGIN_WHITELIST的新项目。

.....

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

我给了客户端权限访问API，请根据各自的环境设置端口号。

请尝试重新获取一次。

我们成功获取了JSON。
or
我们已经成功获取了JSON。

发布

我会将以下内容写在客户端所要发送的POST位置。

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

请在服务器端启动的情况下运行客户端。

在浏览器的控制台中，POST提交的数据将会显示出来。

让我们再获取一次以确认。

我已确认数据库中已添加了id为4的数据。