精华内容
下载资源
问答
  • 解决Django跨域访问问题
    2021-04-27 16:36:20

    1.安装django-cors-headers

    pip install django-cors-headers
    

    2.修改settings.py

    # 在settings.py中放开IP访问限制
    ```python
    
    ALLOWED_HOSTS = ['192.168.1.*', '192.168.1.*',] # # 设置IP白名单
    
    ALLOWED_HOSTS = ['*',] 	# 允许所有的IP可以访问
    
    INSTALLED_APPS = [
        ......
        'corsheaders',
        ......
    ]
    
    MIDDLEWARE = [
        ......
        'corsheaders.middleware.CorsMiddleware', 		# 置于首行
        'django.middleware.common.CommonMiddleware',	# 非必须,没有则写上
        ......
    ]
    
    CORS_ORIGIN_ALLOW_ALL = True
    CORS_ALLOW_CREDENTIALS = True
    

    3.django跨域启动

    python manage.py runserver 					# 正常启动方式
    python manage.py runserver 0.0.0.0:8000  	# 跨域启动方式
    # 0.0.0.0 指本地IP或者服务器IP;8000 指对外暴露的端口
    

    4.访问方式

    http://电脑IP(服务器IP):8000 # 再加路径等
    
    更多相关内容
  • Django 跨域

    2021-06-02 20:57:20
    一、 昨日内容回顾 1、 JsonResponse return JsonResponse(data, safe=False, json_dumps_params={'ensure_ascii': False}) 2、 HttpResponse ...return HttpResponse...需要继承View: from django.views impo...

    day04

    一、 昨日内容回顾

    1、 JsonResponse

    return JsonResponse(data, safe=False, json_dumps_params={'ensure_ascii': False})
    

    2、 HttpResponse

    return HttpResponse(json.dumps(data, ensure_ascii=False))
    

    3、 类视图

    类视图: 结构清晰

    ​ 更强的复用性

    需要继承View: from django.views import View

    from django.views import View
    from django.http import JsonResponse
    
    
    class Index(View):
        
        def get(self, request):
            # 获取数据时使用get方法
            return JsonResponse({'msg': 'OK', 'code': 200})
        
        def post(self, request):
            # 添加数据使用post
            pass
    
    from django.urls import path
    from . import views
    
    urlpatterns = [
        path('index/', views.Index.as_view())
    ]
    

    二、今日内容

    1、静态路由

    urlpatterns属性

    urlpatterns是路由文件中的一个全局变量,用来存放路由及视图函数的映射关系

    用户发起的请求URL都会首先进入主控制目录下的这个urls.py文件中进行查找匹配

    1. 首先找到urls.py下的urlpatterns全局变量,这是一个路由规则实例的列表数据。
    2. 按照先后定义顺序,进行路由匹配。
    3. 找到第一个匹配项时停止匹配,执行匹配到的视图函数。
    4. 遍历完全,未发现匹配,django进行异常处理

    其中urlpatterns中的每一个路由映射规则可以由pathre_path进行构造


    注意Django的路由不考虑HTTP请求方式,仅根据URL进行路由;即,只要URL相同,无论POSTGET等哪种请求方式都指向同一个操作函数

    path方法

    path(str, view, kwargs=None, name=None)
    '''
    str:一个匹配对应url地址的规则字符串
    view:路由对应的视图函数,并且会自动封装HttpRequest作为第一个参数给这个视图函
    kwargs:视图函数的关键字参数
    name:该路由的全局命名,可以让我们方便的在django项目中任意部分显示的使用,相当于为url取变量名,接下来全局使用该命名值即可;当对应url路由改变之后,结合路由反向解析使用的地方不需要更改路由
    '''
    

    re_path

    re_path(regex, view, kwargs=None, name=None)
    '''
    regex:一个匹配对应url地址的规则字符串
    view:路由对应的视图函数,并且会自动封装HttpRequest作为第一个参数给这个视图函
    kwargs:视图函数的关键字参数
    name:该路由的全局命名,可以让我们方便的在django项目中任意部分显示的使用,相当于为url取变量名,接下来全局使用该命名值即可;当对应url路由改变之后,结合路由反向解析使用的地方不需要更改路由
    '''
    

    案例

    新闻 分类

     

    1、新建django项目

    使用pycharm创建项目

    file---newProject

    使用命令创建项目

    django-admin startproject projectname
    

    2、 新建app

    python manage.py startapp app01
    

    **3、 配置settings.py,在settings.py中配置app,切换语言和时区,切换数据库为mysql, **

    INSTALLED_APPS = [
        ...
        'app01.apps.App01Config',
    ]
    LANGUAGE_CODE = 'zh-hans'  # 语言
    
    TIME_ZONE = 'Asia/Shanghai'  # 时区
    
    USE_TZ = False  # 让修改的时区生效
    
    # 配置数据库
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',  # 引擎,使用 mysql
            'NAME': 'day04',   # 数据库名称
            'USER': 'root',  # 数据库的登录用户名
            'PASSWORD': 'root1234',  # 数据库的登录的密码
            'HOST': '127.0.0.1',  # 数据库所在的主机
            'PORT': 3306,  # 数据库使用的端口号
        }
    }
    

    需要在settings.py所在的目录下init.py中,写入以下内容

    import pymysql
    pymysql.install_as_MySQLdb()
    

    4、 在后端进行跨域配置

    什么是跨域问题?

    指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

    所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域。

    django后端跨域

    • 安装django-cors-headers

      pip install django-cors-headers
      
      # pip show 模块名,  查看某个模块是否安装过
      pip show django-cors-headers
      
    • 在settings.py下的INSTALLED_APPS中进行配置

      INSTALLED_APPS = [
          # 第三方包
          'corsheaders',  # 跨域
          'app01.apps.App01Config',
      ]
      
    • 在settings.py下的MIDDLEWARE中配置

      MIDDLEWARE = [
          'django.contrib.sessions.middleware.SessionMiddleware',
          # 在这里进行配置跨域 , 在中间件第三行
          'corsheaders.middleware.CorsMiddleware',
          'django.middleware.common.CommonMiddleware',
          # 注释掉csrf这一行,第五行
          # 'django.middleware.csrf.CsrfViewMiddleware',
      ]
      
    • 在settings.py中添加变量,允许所有的 源访问

      CORS_ALLOW_ALL_ORIGINS = True  # 允许所有的源进行访问
      

    5、 在主路由下配置app,做路由分发

    from django.contrib import admin
    from django.urls import path, include
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('app01/', include('app01.urls'))
    ]
    
    # app01/urls.py
    from django.urls import path
    from . import views
    
    urlpatterns = [
        
    ]
    

    6、 在models.py中设计新闻分类表

    from django.db import models
    
    # Create your models here.
    
    
    # 在models.py下每新建一个类,就代表在数据库新建一张表
    class Cate(models.Model):
        # 类下面的属性,是表中字段
        name = models.CharField(max_length=32)
    
        def __str__(self):
            return self.name
    

    7、 生成迁移文件和执行迁移文件

    python manage.py makemigrations
    
    python manage.py migrate
    

    9、 添加分类接口

    from django.views import View
    from django.http import JsonResponse
    
    from .models import Cate
    
    
    class CateView(View):
    
        def post(self, request):
            # 获取网页提交数据
            name = request.POST.get('name')  # None
            # 判断数据是否完整 没有拿到数据的话,返回消息,数据不完整
            if not name:
                return JsonResponse({'msg': '数据不完整', 'code': 400}, json_dumps_params={'ensure_ascii': False})
            # 如果拿到数据,添加
            Cate.objects.create(name=name)
            return JsonResponse({'msg': '添加成功', 'code': 200}, json_dumps_params={'ensure_ascii': False})
    
    

    10、 添加路由

    from django.urls import path
    from . import views
    
    urlpatterns = [
        path('cate/', views.CateView.as_view()),  # 分类增删改查
    ]
    

    11、 分类接口文档

    请求地址: http://127.0.0.1:8000/app01/cate/

    请求方法: post

    请求参数:

    字段类型必填
    namestringtrue

    返回数据:

    # 请求失败,数据为空时的提示
    {
        'msg': '数据不完整',
        'code': 400
    }
    # 请求成功
    {
        'msg': '添加成功',
        'code': 200
    }
    

    12、 在vue下新建AddCate.vue页面,实现页面表单功能

    创建vue: vue init webpack myvue

    安装axios: cnpm install --save axios

    1、 配置全局axios

    在src文件夹下main.js当中,进行配置

    import axios from 'axios'
    Vue.prototype.axios = axios
    axios.defaults.baseURL = 'http://127.0.0.1:8000'
    

    2、 在src下的components下新建AddCate.vue页面

    <template>
        <div>
            <!-- 在这里写添加分类的表单 -->
            <div>
                <form action="">
                    <p>分类名称: <input type="text" v-model="name"></p>
                    <p><button>添加</button></p>
                </form>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                name: ''
            }
        },
        methods: {
    
        },
        created() {
    
        }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    13、django+vue+浏览器执行 流程讲解

     

    展示数据

    1、展示数据接口

    class CateView(View):
    
        def get(self, request):
            # 1、 获取所有的数据
            cate_list = Cate.objects.all()
            # 2、把获取出来的数据转成列表
            cate_data = [{'id': i.id, 'name': i.name} for i in cate_list]
            # 3、 返回数据以json形式返回
            return JsonResponse(cate_data, safe=False, json_dumps_params={'ensure_ascii': False})
    

    2、 展示数据接口文档

    请求地址: http://127.0.0.1:8000/app01/cate/

    请求方法: get

    请求参数: 无

    请求示例: http://127.0.0.1:8000/app01/cate/

    接口格式: json

    返回数据格式:

    [
    	{
    		'id': 1,
    		'name': '军事'
    	},
    	{
    		'id': 2,
    		'name': '财经'
    	}
    ]
    

    3、 新建vue页面,请求数据,并展示

    <template>
        <div>
            <table class="t1">
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>操作</td>
                </tr>
                <tr v-for="cate in cate_list" :key="cate.id">
                    <td>{{cate.id}}</td>
                    <td>{{cate.name}}</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
            </table>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                cate_list: []
            }
        },
        methods: {
            // 获取分类的方法
            getCate() {
                // 在这里执行分类的方法的逻辑
                // 向后台请求数据
                this.axios({ // axios默认请求是get,所以可以不用写method: get
                    url: '/app01/cate/'
                }).then(res => {
                    console.log(res.data)
                    this.cate_list = res.data
                })
            }
        },
        created() {
            // 在页面加载完成之前调用
            this.getCate()
        }
    }
    </script>
    
    <style scoped>
    .t1 {
        width: 50%;
        margin: 30px auto;
    }
    </style>
    
    

    2、动态路由

    去详情页面

    跳转路由,确定要获取的详情的信息

    1、 点击名称,跳转页面,使用router-link

    <router-link :to="{name: 'Detail', query: {'cate_id': cate.id}}">{{cate.name}}</router-link>
    

    2、 在详情页面进行操作

    • 获取路由当中的分类id

      <script>
      export default {
          data() {
              return {
                  // 1、获取路由当中的分类id
                  cate_id: this.$route.query.cate_id
              }
          },
      }
      </script>
      
    • 通过获取到的分类id,去后台查询所对应的数据

      <script>
      export default {
          data() {
              return {
                  // 1、获取路由当中的分类id
                  cate_id: this.$route.query.cate_id
              }
          },
          methods: {
              getDetail() {
                  this.axios({
                      url: '/app01/detail/?cate_id=' + this.cate_id
                  }).then(res => {
                      console.log(res.data)
                  })
              }
          },
          created() {
              this.getDetail()
          }
      }
      </script>
      
    • 展示数据

      <template>
          <div>
              {{cate.id}} ------ {{cate.name}}
          </div>
      </template>
      
      <script>
      export default {
          data() {
              return {
                  // 1、获取路由当中的分类id
                  cate_id: this.$route.query.cate_id,
                  cate: {}
              }
          },
          methods: {
              getDetail() {
                  this.axios({
                      url: '/app01/detail/?cate_id=' + this.cate_id
                  }).then(res => {
                      console.log(res.data)
                      this.cate = res.data
                  })
              }
          },
          created() {
              this.getDetail()
          }
      }
      </script>
      
      <style scoped>
      
      </style>
      
      

    删除

     

    1、 删除接口

    class CateView(View):
        
        def delete(self, request):
            # 1、获取路由当中的参数
            cate_id = request.GET.get('cate_id')
            # 2、获取要删除的对象
            # pk 代表主键
            try:
                cate_obj = Cate.objects.get(pk=cate_id)
            except Cate.DoesNotExist:
                return JsonResponse({'msg': '获取分类不存在', 'code': 400})
            # 3、删除
            cate_obj.delete()
            # 4、删除成功,返回消息
            return JsonResponse({'msg': '删除成功', 'code': 200})
    

    django使用get查询 获取不到数据所抛出的异常, 需要使用try except进行异常捕获。

     

    解决方法

    try:
        cate_obj = Cate.objects.get(pk=cate_id)
    # get查询的哪一张表,就对哪一张表进行异常捕获。
    except Cate.DoesNotExist:
        retrun JsonResponse({'msg': '分类不存在', 'code': 400})
    

    2、 接口文档

    请求地址: http://127.0.0.1:8000/app01/cate/

    请求方法: delete

    请求参数: cate_id

    请求示例: http://127.0.0.1:8000/app01/cate/?cate_id=1

    返回数据:json

    数据格式:

    {
        'msg': '删除成功',
        'code': 200
    }
    

    3、在ShowCate.vue页面当中,删除按钮上添加点击事件

    <template>
    	<button @click="delCate(cate.id)">删除</button>
    </template>
    <script>
    export default {
        methods: {
            // 删除分类
            // 删除分类
            delCate(cate_id) {
                console.log(cate_id)
                // 向删除的接口发送请求
                this.axios({
                    url: '/app01/cate/?cate_id=' + cate_id,
                    // 默认发送get请求,所以需要添加method为delete这个请求方法
                    method: 'delete'
                }).then(res => {
                    console.log(res.data)
                })
            },
        },
    }
    </script>
    

    修改

     

    1、为编辑按钮添加点击事件

    <template>
    	<button @click="toUpdate(cate.id)">编辑</button>
    </template>
    
    <script>
    export default {
        methods: {
            // 去修改页面
            toUpdate(cate_id) {
                // 跳转页面
                this.$router.push({
                    name: 'UpdateCate',
                    query: {'cate_id': cate_id}
                })
            },
        },
    }
    </script>
    

    2、 新建UpdateCate.vue页面

    3、为UpdateCate.vue添加路由

    import Vue from 'vue'
    import Router from 'vue-router'
    import UpdateCate from '@/components/UpdateCate'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/update_cate',  // 浏览器地址栏当中输入的路径
          name: 'UpdateCate',  // 使用$router.push跳转页面时,所带的参数
          component: UpdateCate  // 跳转到路径所批定页面以后,所显示 的vue页面
        }
          
      ]
    })
    
    

    4、 在页面加载完成之前获取要修改的对象的数据(要有一个单独获取数据的接口)

    <script>
    export default {
        data() {
            return {
                cate_id: this.$route.query.cate_id,
                cate: {},
                name: ''
            }
        },
        methods: {
            // 获取分类的详情信息
            getDetail() {
                this.axios({
                    url: '/app01/detail/?cate_id=' + this.cate_id
                }).then(res => {
                    console.log(res.data)
                    this.cate = res.data
                    this.name = res.data.name
                })
            }
        },
        created() {
            // 在页面加载完成之前获取分类的详情信息, 调用getDetail() 这个方法
            this.getDetail()
        }
    }
    </script>
    

    5、把获取到数据展示出来,确认一下原数据是什么,要修改成什么样?

    <template>
        <div>
            {{cate_id}}
            <div>
                原数据: {{cate.name}}
            </div>
            <div>修改内容: <input type="text" v-model="name"></div>
            <div><button>修改</button></div>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                cate_id: this.$route.query.cate_id,
                cate: {},
                name: ''
            }
        },
        methods: {
            // 获取分类的详情信息
            getDetail() {
                this.axios({
                    url: '/app01/detail/?cate_id=' + this.cate_id
                }).then(res => {
                    console.log(res.data)
                    this.cate = res.data
                    this.name = res.data.name
                })
            }
        },
        created() {
            // 在页面加载完成之前获取分类的详情信息, 调用getDetail() 这个方法
            this.getDetail()
        }
    }
    </script>
    

    6、 为修改添加点击事件,获取到输入的内容

    <template>
        <div>
            <div><button @click="updateCate">修改</button></div>
        </div>
    </template>
    
    <script>
    export default {
        methods: {
            // 修改分类
            updateCate() {
                console.log(this.name)
            },
        },
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    7、 修改数据的接口

    class CateView(View):
        
        def put(self, request):
           
            # 2、 获取提交的修改的数据
            print(request.body)
            name_str = (request.body).decode()
            # 使用json把获取内容转成字典
            name_dict = json.loads(name_str)
            cate_id = name_dict.get('cate_id')
            name = name_dict.get('name')
            # 3、通的对象的id查询要修改的对象
            cate_obj = Cate.objects.get(pk=cate_id)
            # 4、为查询对象里面的属性进行重新赋值,并保存
            cate_obj.name = name
            cate_obj.save()
            # 5、修改成功,返回消息
            return JsonResponse({'msg': '修改成功', 'code': 200})
    

    8、 修改的接口文档

    请求地址: http://127.0.0.1:8000/app01/cate/

    请求方法: put

    请求参数:

    字段类型必填说明
    cate_idinttrue要修改的对象id
    namestringtrue修改的内容

    返回数据:

    {
        'msg': '修改成功',
        'code': 200
    }
    

    9、 完成修改功能

    <template>
        <div>
            {{cate_id}}
            <div>
                原数据: {{cate.name}}
            </div>
            <div>修改内容: <input type="text" v-model="name"></div>
            <div><button @click="updateCate">修改</button></div>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                cate_id: this.$route.query.cate_id,
                cate: {},
                name: ''
            }
        },
        methods: {
            // 修改分类
            updateCate() {
                console.log(this.name)
                this.axios({
                    url: '/app01/cate/',
                    method: 'put',
                    data: {'cate_id': this.cate_id, 'name': this.name}
                }).then(res => {
                    // 在控制台打印返回结果
                    console.log(res.data)
                })
            },
            // 获取分类的详情信息
            getDetail() {
                this.axios({
                    url: '/app01/detail/?cate_id=' + this.cate_id
                }).then(res => {
                    console.log(res.data)
                    this.cate = res.data
                    this.name = res.data.name
                })
            }
        },
        created() {
            // 在页面加载完成之前获取分类的详情信息, 调用getDetail() 这个方法
            this.getDetail()
        }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    动态路由传参

    有的时候,我们设置的路由不是一成不变的,如: 我们需要跳转到详情,需要通过某个分类查看该分类的下所有的商品等,那么这样的路由其实对应的都应该是一个视图函数,用以展示页面内容,那么如何设计这样的路由,就要涉及到动态路由及路由传参

    1、通过分类id获取分类的详情信息

    
    

    **2、 动态路由配置 **

    
    

    路由通过尖括号进行分组匹配,使用int以及str内置转换器将连接对应部分的值进行转换;并将匹配到的结果传递到视图函数对应的参数位置上;

    访问: http://127.0.0.1:8000/app01/detail/1/

    其中1将作为cate_id的参数被接收。

    • 其他内置Path转换器,可以将我们的路由参数规定为指定类型
    '''
    str:匹配除了路径分隔符(`/`)之外的非空字符串,这是默认的形式
    int:匹配正整数,包含0
    slug:匹配字母、数字以及横杠、下划线组成的字符串
    uuid:匹配格式化的uuid,如 075194d3-6885-417e-a8a8-6c931e272f00
    path:匹配任何非空字符串,包含了路径分隔符
    '''
    

    动态路由传参与GET传参的异同

    • 动态路由传参,参数需要参与路由匹配,在路由匹配中获取参数
    • GET参数,参数部分不需要参与路由匹配,在视图中获取参数

    3、 路由分发

    路由分发的概念

    我们的路由编写都是在项目主要目录下的urls.py文件中,但是如果app有很多的话,这么多路由都写到一起,明显是一件很不方便管理的事情

    其实在之前的练习中,我们使用的方式均是路由分发,每个子app都拥有自己独立的urls.py路由映射文件,而主控路由文件里只需要使用include函数导入子app下路由文件即可,这就是路由分发

    include路由分发实现

    from django.contrib import admin
    from django.urls import path,include
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('app01/',include("app01.urls"))  # 使用include 实现路由分发,找到子app下的路由文件
    ]
    

    路由分发为我们带来的好处有很多,可以让我们在多个app的项目中更加方便有效的管理每一个路由 并且也可以让我们的用户在访问时看到浏览器中的URL地址更加赏心悦目

    跨域

    前后端分离, 同源策略问题

    端口不同

    python的包管理工具 pip

    pip install 包名

    pip show 包名 # 查看某一个包是否安装

    cnpm install --save 包名 node.js包管理工具 : cnpm

    pip install django-cors-headers 安装django后台跨域包

    配置跨域

    # settings.py
    INSTALLED_APPS = [
        'corsheaders',
    ]
    
    # 中间件
    MIDDLEWARE = [
        # 第三行
        'corsheaders.middleware.CorsMiddleware',
        
        # 把第五行注释
    ]
    
    # 允许所有的源访问
    CORS_ALLOW_ALL_ORIGINS = True
    

    django管理命令

    # 创建项目的命令
    django-admin startproject projectname
    
    # 创建app
    进入项目: cd projectname
    python manage.py startapp appname
    
    # 生成迁移文件
    python manage.py makemigrations
    
    # 执行迁移文件
    python manage.py migrate
    展开全文
  • 本文主要给大家介绍了关于Django跨域请求问题解决的几种方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 几种方法: 使用django-cors-headers全局控制 使用JsonP,只能用于Get方法 在...
  • django跨域问题解决

    2021-08-08 19:30:47
    在前后端分离开发时,前后端时不同的端口,这就涉及到跨域访问数据问题,因为浏览器的同源策略,默认是不支持两个不同域名间相互访问数据,而我们需要在两个域名间相互传递数据,这时我们就要为后端添加跨域访问的...

    在前后端分离开发时,前后端时不同的端口,这就涉及到跨域访问数据问题,因为浏览器的同源策略,默认是不支持两个不同域名间相互访问数据,而我们需要在两个域名间相互传递数据,这时我们就要为后端添加跨域访问的支持。

    1. django-cors-headers扩展

    官方文档:https://github.com/adamchainz/django-cors-headers

    2. 安装

    pip install django-cors-headers
    

    3. 添加应用

    INSTALLED_APPS = (
        ...
        'corsheaders',
        ...
    )
    

    4. 配置中间件

    MIDDLEWARE = [
        'corsheaders.middleware.CorsMiddleware',
        ...
    ]
    

    注意:要在第一行添加

    5. 添加白名单

    # 跨域请求白名单
    CORS_ORIGIN_WHITELIST = (
        'http://127.0.0.1:8080',
        'http://127.0.0.1:8000',
    )
    CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie
    
    
    • 凡是出现在白名单中的域名,都可以访问后端接口
    • CORS_ALLOW_CREDENTIALS 指明在跨域访问中,后端是否支持对cookie的操作。

    6. 跨域实现流程为

    1、浏览器会第一次先发送options请求询问后端是否允许跨域,后端查询白名单中是否有这两个域名

    2、如过域名在白名单中则在响应结果中告知浏览器允许跨域

    3、浏览器第二次发送post请求,携带用户登录数据到后端,完成登录验证操作

    image-20210808192511865

    展开全文
  • django跨域问题

    2021-05-22 21:28:31
    跨域报错:Access to XMLHttpRequest at '...1、为什么会出现跨域 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约

    跨域报错:Access to XMLHttpRequest at 'http://127.0.0.1:8000/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    1、为什么会出现跨域
    出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能。它会阻止一个域的javascript脚本和另外一个域的内容进行交互。简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。这显然是不安全的。为此,浏览器的鼻祖:网景(Netscape)公司提出了优秀的解决方案:著名的浏览器同源策略。现在所有支持JavaScript的浏览器都会使用这个策略所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)

    2、什么是跨域
    当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

    当前页面url    被请求页面url    是否跨域    原因
    http://www.baidu.com/    http://www.baidu.com/index.html    否    同源(协议、域名、端口号相同)
    http://www.baidu.com/    https://www.baidu.com/index.html    跨域    协议不同(http/https)
    http://www.baidu.com/    http://www.google.com/    跨域    主域名不同(test/baidu)
    http://www.baidu.com/    http://blog.baidu.com/    跨域    子域名不同(www/blog)
    http://www.baidu.com:8080/    http://www.baidu.com:8888/    跨域    端口号不同(8080/7001)
     

    方案一

      django实现跨域

    跨域(第二种方法)
    用Django的第三方包 django-cors-headers 来解决跨域问题
    操作步骤:
    1.pip install django-cors-headers
    2.在settings.py中添加'corsheaders.middleware.CorsMiddleware',在SessionMiddleware和CommonMiddleware的中间
    2.1.在INSTALLED_APPS里添加“corsheaders”
    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'corsheaders',#新加
    ]
    2.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.common.CommonMiddleware',
        'django.middleware.csrf.CsrfViewMiddleware',
        'django.contrib.auth.middleware.AuthenticationMiddleware',
        'django.contrib.messages.middleware.MessageMiddleware',
        'django.middleware.clickjacking.XFrameOptionsMiddleware',
     
    ]
    2.3.在sitting.py底部添加
    #跨域增加忽略
    CORS_ALLOW_CREDENTIALS = True
    CORS_ORIGIN_ALLOW_ALL = True
    CORS_ORIGIN_WHITELIST = ()
     # 对应的发送的请求的跨域
    CORS_ALLOW_METHODS = (
        'DELETE',
        'GET',
        'OPTIONS',
        'PATCH',
        'POST',
        'PUT',
        'VIEW',
    )
     
    CORS_ALLOW_HEADERS = (
        'accept',
        'accept-encoding',
        'authorization',
        'content-type',
        'dnt',
        'origin',
        'user-agent',
        'x-csrftoken',
        'x-requested-with',
    )
    
    
    3.在settings.py中添加CORS_ORIGIN_ALLOW_ALL = True
    
    

    方案二

    一、 Access-Control-Allow-Origin

    方法1:使用 response.setHeader(“Access-Control-Allow-Origin”,"*"); 可以解决

    # json序列化+响应参数 
    
    def new(request):
    	 data_list = {'username':'xiaoming', 'age':18, 'gender':1}
    	 response = HttpResponse(json.dumps([data_list]))
    	 response['Access-Control-Allow-Origin'] = '*'  #  其实加这一个响应参数就行
    	 response['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
    	 response['Access-Control-Max-Age'] = '1000'
    	 response['Access-Control-Allow-Headers'] = '*'
    	 return response
    

     

    方案三 中间件

        Django发布应用后其他前端无法使用iframe调用页面
         出现的情况:Refused to display 'http://127.0.0.1:8000/polls/' in a frame because it set 'X-Frame-Options' to 'sameorigin'
         解决方法:在settings.py中添加
         X_FRAME_OPTIONS = 'ALLOWALL'

        django中,我们经常要允许跨域请求和X-frame,这时我们不必一定要用第三方的组件,而是自定义一个中间键即可。

    
    from django.utils.deprecation import MiddlewareMixin
    
    from django.http import HttpResponse
    
    class LoginToken(MiddlewareMixin):
    
        def process_response(self,request,response):
    
            # 添加响应头,允许跨域
    
            response['Access-Control-Allow-Origin'] = "*"
    
            response['Access-Control-Allow-Headers'] = "*"
    
            response['Access-Control-Expose-Headers'] = "*"
    
            response['Access-Control-Allow-Methods'] = "*"
    
            response['Access-Control-Allow-Credentials']="true"
    
            # 允许X-frame
    
            response['X-Frame-Options'] = 'ALLOWALL'
    
            return response
    

    axios跨域

    axios完整写法:
    this.axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    }).then((res)=>{
          console.log(res)
    }).catch((error)=>{
          console.log(error)
     });
    post请求
    this.axios.post('',{}).then((res)=>{}).catch((error)=>{})
    get请求
    axios.get('/user?ID=12345')
    .then((response)=> {
      console.log(response);
    })
    .catch((error)=> {
      console.log(error);
    });
    
    在main.js里配置,该两行
    import axios from 'axios'
    Vue.prototype.axios = axios   //其它组件可以使用this.axios
    
    

     

    展开全文
  • Django 跨域问题解决

    2021-04-02 21:33:30
    什么是跨域? 在前后端分离的项目中,跨域是一个必不可少的问题,也是一个很正常的问题,那么什么是跨域跨域就是基于同源策略,不同IP、域名、端口都算作跨域。 同源策略是浏览器的安全策略。 同源:同源(ip地址...
  • 1 在终端安装解决跨域相关的包 python -m pip install django-cors-headers 2 在django项目中的setting.py文件钟加入以下配置 ‘corsheaders’, 注释csrf, 添加 ‘corsheaders.middleware.CorsMiddleware’, 最后...
  • 一招彻底解决Django跨域请求问题

    千次阅读 2020-11-13 16:04:53
    文章目录一招彻底解决Django跨域请求问题1、为什么会出现跨域2、什么是跨域3、解决跨域在后端发送请求时, 带上相应的请求头或者在配置文件中全局配置Nginx配置本文参考 一招彻底解决Django跨域请求问题 跨域报错:...
  • 配置django跨域

    2020-12-18 21:25:43
    1.配置django跨域 1. 安装包 pip install django-cors-headers 2. 注册应用 INSTALLED_APPS = [ ... 'corsheaders', # 添加 django-cors-headers 使其可以进行 cors 跨域 ] 3. 添加中间件 MIDDLEWARE = [ # ...
  • Django跨域解决方法Django跨域解决方法 基本步骤 1.安装 pip install django-cors-headers 2.对setting.py中文件进行配置 # Application definition INSTALLED_APPS = [ 'django.contrib.admin', ###########...
  • 前端Vue,后端Django进行跨域配置,django2.2.5 django配置 安装插件 pip install django-cors-headers 配置文件settting.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django....
  • 跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的...这篇文章主要介绍了Django跨域资源共享问题小结,需要的朋友可以参考下
  • Django跨域配置

    2021-11-15 17:45:13
    1.pip install django-cors-headers 2.在settings.py中添加'corsheaders.middleware.CorsMiddleware',在SessionMiddleware和CommonMiddleware的中间 2.1.在INSTALLED_APPS里添加“corsheaders” INSTALLED_APPS = [ ...
  • 主要介绍了Django跨域请求CSRF的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了Django+vue跨域问题解决的详细步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • django处理Ajax跨域访问 使用javascript进行ajax访问的时候,出现如下错误 出错原因:javascript处于安全考虑,不允许跨域访问。下图是对跨域访问的解释: 概念: 这里说的js跨域是指通过js或python在不同的域之间...
  • 1.Vue前端设置代理(方案一) 我们在使用vue-cli启动项目的时候...我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置。我们可以直接通过node.js代理服务器来实现跨域请求。 ...
  • 彻底解决django跨域问题

    万次阅读 2018-12-01 18:51:26
    1.何谓跨域?后端接口访问地址是这个,你却偏要用其他域名来访问,这就产生了跨域. ...3.django后端如何处理跨域? 第一步,安装第三方扩展: pip install django-cors-headers 第二步,添加应用: INS...
  • 如何解决pycharm配置跨域不提示? 正常我们需在在如上中间件内配置跨域,但是2019之前的版本配置中间件可能需要全部自己敲出来,不会有提示,那我们不妨换个位置试试 在TEMPLATES模板的最后一行(如上图位置所示)...
  • Django跨域

    2020-07-28 09:56:10
    跨域报错:Access to XMLHttpRequest at '...1、为什么会出现跨域 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)
  • vue与django跨域问题

    2019-12-14 15:54:47
    问题出现环境:使用vue cli工具进行前端开发,在组件中使用axios向 django 服务器发起get请求 vue cli 服务器地址为http://192.168.11.156:8080/#/ 请求的目的地址为http://192.168.11.156:8000/polls/home vue ...
  • Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的现代版。与 JSONP 不同,CORS 除了 GET 要求方法...
  • 一 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,463
精华内容 2,585
关键字:

django跨域