最终现实 不同域的跨域的访问
前端: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}