django 前后端分离 跨域访问

最终现实 不同域的跨域的访问
前端：127.0.0.1:5000
后端：127.0.0.1:8000
可以部署到不同服务器上，实现前后端的分离

一 、创建项目

创建文件夹:blog_project

命令行输入

django-admin startproject blog

安装相应的库

'jwt token相关'
pip install pyjwt
'跨域支持'
pip install django-cors-headers

二、前后端分类设置

设置的配置文件的修改

1. settings.py文件修改

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders', # 添加跨域APP
]

2.中间件修改

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware', # 添加跨域中间件
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware', # 删除
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

3.跨域参数

# 文件最后
# 允许地址
CORS_ORIGIN_ALLOW_ALL = True

# 允许模式
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)

# 允许响应头
CORS_ALLOW_HEADERS = (
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)


# 其它设置
LANGUAGE_CODE = 'zh-Hans'
TIME_ZONE = 'Asia/Shanghai'

三、数据库创建与链接

1.创建数据库

'链接数据库'
mysql -u root -p

'创建数据库'
create database blog default charset utf8;

2.数据库配置

settings.py设置数据配置

DATABASES = {
    
    
    'default': {
    
    
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'blog',
        'USER': 'root',
        'PASSWORD': '******',
        'HOST': '127.0.0.1',
        'PORT': '3306'
    }
}

# __init__.py 文件下添加pymysql导入
import pymysql
pymysql.install_as_MySQLdb()

确认配置是否正确：启动程序

python manage.py runserver

四、创建测试view

1.创建路由

创建views.py

from django.http import JsonResponse


def test_api(request):
    return JsonResponse({'code': 200})

导入urls.py文件增加 路由

from django.contrib import admin
from django.urls import path,re_path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'^test/$', views.test_api)
]

2.浏览器测试

http://127.0.0.1:8000/test/

返回
{"code": 200}

五、跨域测试

1.客户端修改

login.html

//url:"http://127.0.0.1:8000/v1/tokens",
// 测试使用
url:"http://127.0.0.1:8000/test/", 

浏览器登陆界面

//显示前端 登陆界面
http://127.0.0.1:5000/login

2.跨域测试

登陆界面点击登陆按钮后

OPTIONS 请求 预检请求

Request URL: http://127.0.0.1:8000/test/ <------------------
Request Method: OPTIONS <------------------
Status Code: 200 OK
Remote Address: 127.0.0.1:8000 
Referrer Policy: strict-origin-when-cross-origin

Access-Control-Allow-Headers: accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with <------------------
Access-Control-Allow-Methods: DELETE, GET, OPTIONS, PATCH, POST, PUT <------------------
Access-Control-Allow-Origin: *   <------------------
Access-Control-Max-Age: 86400    <------------------
Content-Length: 0
Content-Type: text/html; charset=utf-8
Date: Thu, 25 Feb 2021 01:32:05 GMT
Server: WSGIServer/0.2 CPython/3.7.6
Vary: Origin

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Cache-Control: no-cache
Connection: keep-alive
Host: 127.0.0.1:8000			 <------------------
Origin: http://127.0.0.1:5000    <------------------
Pragma: no-cache
Referer: http://127.0.0.1:5000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36

post请求

Request URL: http://127.0.0.1:8000/test/  <------------------
Request Method: POST <------------------
Status Code: 200 OK  <------------------
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin

Access-Control-Allow-Origin: *  <------------------
Content-Length: 13
Content-Type: application/json
Date: Thu, 25 Feb 2021 01:32:05 GMT
Server: WSGIServer/0.2 CPython/3.7.6
Vary: Origin
X-Frame-Options: SAMEORIGIN

Accept: application/json, text/javascript, */*; q=0.01
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 35
Content-Type: application/json <------------------
Host: 127.0.0.1:8000 
Origin: http://127.0.0.1:5000 <------------------
Pragma: no-cache
Referer: http://127.0.0.1:5000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36

payload

{username: "123", password: "123"}
password: "123"
username: "123"

返回数据

{"code": 200}