1Django跨域

一，前端测试页面准备：

为了方便测试，采用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启动项目：

python app.py

 

二：后端配置跨域并测试：

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）选装粘贴的内容格式化一下，目的是式使代码规整

ctrl+alt+L

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
#前端页面请求到的数据
http://127.0.0.1:5000/test_api

 

posted @   linuxTang  阅读(102)  评论(1)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？
点击右上角即可分享
微信分享提示