1Django跨域
原创
©著作权归作者所有:来自51CTO博客作者wx5d4124a358e8a的原创作品,请联系作者获取转载授权,否则将追究法律责任
一,前端测试页面准备:
为了方便测试,采用flask框架作为前端服务支持:
1使用pycharm创建一个flask项目,然后在项目中引入js文件并编写模板文件:
目录结构:
flaskProject
static
js
jquery.min.js
templates
test_api.html
venv
app.py
模板代码:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
</head>
<body id="show">
</body>
</html>
<script>
$(function(){
$.ajax({
"type":"get",
"url": "http://127.0.0.1:8000/test_cors",
"dataType": "json",
"success":function(res){
$('#show').html(res.msg);
}
})
})
</script>
解释:res用于接收响应的对象,res.msg相当于从对象里取值,因为后端是{'msg':'CORS is ok'},所以res.msg就可以取到msg的值CORS is ok
2配置路由:
from flask import Flask, send_file
@app.route('/test_api')
def test_api():
#测试
return send_file('templates/test_api.html')
3启动项目:
二:后端配置跨域并测试:
1添加django-admin.py到系统环境变量
D:\Program Files (x86)\Python\Python310\Scripts
2创建项目:
D:\PycharmProjects>django-admin startproject linuxTangblog
3安装库安装pip install django-cors-headers
4创建数据库:
mysql> create database linuxTangblog;
5配置django基础项目
1)先临时禁掉csrf
#'django.middleware.csrf.CsrfViewMiddleware',
2)配置数据库
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'linuxTangblog',
'USER': 'root',
'PASSWORD': '123456',
'HOST': '127.0.0.1',
'PORT': '3306'
}
}
3)配置图片上传路径
A:首先在项目目录中创建media文件夹
B:然后在setting最底部加上如下配置
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
C:给media配置主路由
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('admin/', admin.site.urls),
path('test_cors',views.test_cors),
]
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
3)其它配置项:
ALLOWED_HOSTS = ['*']
LANGUAGE_CODE = 'zh-Hans'
TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False #一定要把这个时区功能关闭,要不数据库的时间会被django进行动态调整
4)启动django检查是否有报错:
D:\PycharmProjects\linuxTangblog>python manage.py runserver
6配置CORS跨域:
1)在INSTALLED_APPS 中添加 corsheaders
INSTALLED_APPS = [
'corsheaders',
]
2)MIDDLEWARE 中添加 corsheaders.middleware.CorsMiddleware 位置尽量靠前,官方建议 ‘django.middleware.common.CommonMiddleware’ 上方
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)在setting.py的最下方配置不设跨域白名单和遇检请求及允许的头
#不设白名单,允许所有跨域访问
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',
)
4)选装粘贴的内容格式化一下,目的是式使代码规整
5)终端运行程序检查有无报错:
D:\PycharmProjects\linuxTangblog>python manage.py runserver
7测试:
1)进入pycharm,在项目linuxTangblog同名的目录下创建一个views.py
from django.http import JsonResponse
def test_cors(request):
#JsonResponse可以八字典转换成json字符串
return JsonResponse({'msg':'CORS is ok'})
解释:因为前端AJAX请求的是"dataType": "json",所以我们后端就要响应return JsonResponse({'msg':'CORS is ok'})
2)配置路由:
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('test_cors',views.test_cors),
]
3)访问路由测试:
看看前端是否能请求到数据
#后端看看响应的数据
http://127.0.0.1:8000/test_cors
#前端页面请求到的数据