浅谈django rest jwt vue 跨域问题

下面是关于“浅谈django rest jwt vue 跨域问题”的完整攻略。

简介

在使用 Django Rest Framework、JWT 和 Vue 构建前后端分离应用时，会遇到跨域问题。本文将详细介绍如何使用 Django Rest Framework、JWT 和 Vue 解决跨域问题。

什么是跨域问题

在同一个域名下，浏览器之间是可以互相访问数据的。而不同域名下的浏览器之间，由于同源策略的限制，是不能直接访问数据的，这就是跨域问题。

解决跨域问题的方法

Django Rest Framework 的处理方式

Django Rest Framework 通过使用“中间件”来处理跨域问题。以下是示例代码：

class CorsMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)

        response['Access-Control-Allow-Origin'] = '*'
        response['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
        response['Access-Control-Allow-Headers'] = 'Content-Type, Authorization'

        return response

Vue 的处理方式

Vue 通过使用“代理”来处理跨域问题。以下是示例代码：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

整合 Django Rest Framework、JWT 和 Vue

以下是 Django Rest Framework 和 JWT 的示例代码：

# views.py
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.permissions import IsAuthenticated
from rest_framework_jwt.authentication import JSONWebTokenAuthentication

class UserInfoView(APIView):
    permission_classes = [IsAuthenticated]
    authentication_classes = [JSONWebTokenAuthentication]

    def get(self, request):
        return Response({'username': request.user.username})

# urls.py
from django.urls import path
from .views import UserInfoView
from rest_framework_jwt.views import obtain_jwt_token, refresh_jwt_token

urlpatterns = [
    path('login/', obtain_jwt_token),
    path('refresh_token/', refresh_jwt_token),
    path('user_info/', UserInfoView.as_view())
]

以下是 Vue 的示例代码：

// login.vue
axios.post('/api/login/', {username: '', password: ''})
  .then(response => {
    // 获取并保存 token 到本地存储
  })
  .catch(error => {
    console.log(error)
  })

// user_info.vue
axios.get('/api/user_info/',
  { headers: { 'Authorization': `JWT ${token}` } })
  .then(response => {
    this.username = response.data.username
  })
  .catch(error => {
    console.log(error)
  })

总结

本文介绍了使用 Django Rest Framework、JWT 和 Vue 解决跨域问题的完整步骤，其中包括了 Django Rest Framework、Vue 和 JWT 分别处理跨域问题的示例代码。