解决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文件中进行查找匹配

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

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

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

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

请求参数：

字段	类型	必填
name	string	true

返回数据：

# 请求失败，数据为空时的提示
{
    '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_id	int	true	要修改的对象id
name	string	true	修改的内容

返回数据：

{
    '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跨域请求问题的解决方法示例
2020-12-23 15:11:58

本文主要给大家介绍了关于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请求，携带用户登录数据到后端，完成登录验证操作
收起
展开全文

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地址...

收起

web nginx python 后端
vue和django跨域问题的解决
2022-03-08 21:34:38

1 在终端安装解决跨域相关的包 python -m pip install django-cors-headers 2 在django项目中的setting.py文件钟加入以下配置 ‘corsheaders’, 注释csrf, 添加 ‘corsheaders.middleware.CorsMiddleware’, 最后...

收起

vue.js python
一招彻底解决Django跨域请求问题
千次阅读 2020-11-13 16:04:53

文章目录一招彻底解决Django跨域请求问题1、为什么会出现跨域2、什么是跨域3、解决跨域在后端发送请求时，带上相应的请求头或者在配置文件中全局配置Nginx配置本文参考一招彻底解决Django跨域请求问题跨域报错：...

收起

nginx http web python
配置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 = [ # ...

收起
Python中Django跨域解决方法
2020-02-12 21:16:39

Django中跨域解决方法Django中跨域解决方法基本步骤 1.安装 pip install django-cors-headers 2.对setting.py中文件进行配置 # Application definition INSTALLED_APPS = [ 'django.contrib.admin', ###########...

收起
django跨域配置，Vue跨域配置
2019-12-27 16:59:46

前端Vue，后端Django进行跨域配置，django2.2.5 django配置安装插件 pip install django-cors-headers 配置文件settting.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django....

收起

vue
Django跨域资源共享问题(推荐)
2020-09-17 18:07:27

跨域资源共享(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 = [ ...

收起

python 后端
Django跨域请求CSRF的方法示例
2020-09-19 23:24:43

主要介绍了Django跨域请求CSRF的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

收起
Django+vue跨域问题解决的详细步骤
2020-10-17 12:08:23

主要介绍了Django+vue跨域问题解决的详细步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

收起
Django 跨域请求处理的示例代码
2021-01-21 17:51:14

django处理Ajax跨域访问使用javascript进行ajax访问的时候,出现如下错误出错原因：javascript处于安全考虑,不允许跨域访问。下图是对跨域访问的解释：概念：这里说的js跨域是指通过js或python在不同的域之间...

收起
vue+django跨域问题解决方案（前后端两种方案）
万次阅读 2018-11-25 19:36:38

1.Vue前端设置代理（方案一）我们在使用vue-cli启动项目的时候...我们可以在vue-cli配置文件里面设置一个代理，跨域的方法有很多，通常需要后台来进行配置。我们可以直接通过node.js代理服务器来实现跨域请求。 ...

收起

vue跨域跨域解决方案
彻底解决django跨域问题
万次阅读 2018-12-01 18:51:26

1.何谓跨域?后端接口访问地址是这个,你却偏要用其他域名来访问,这就产生了跨域. ...3.django后端如何处理跨域? 第一步,安装第三方扩展: pip install django-cors-headers 第二步,添加应用: INS...

收起
pycharm + django跨域无提示的解决方法
2021-01-19 23:30:07

如何解决pycharm配置跨域不提示？正常我们需在在如上中间件内配置跨域，但是2019之前的版本配置中间件可能需要全部自己敲出来，不会有提示，那我们不妨换个位置试试在TEMPLATES模板的最后一行（如上图位置所示）...

收起
Django跨域
2020-07-28 09:56:10

跨域报错：Access to XMLHttpRequest at '...1、为什么会出现跨域出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）

收起

python
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 ...

收起

vue
用CORS 解决vue.js django跨域调用
2021-08-06 08:45:00

Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法...

收起
Django跨域请求原理及实现代码
2021-01-19 23:38:11

一同源策略同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对...

收起

Django 跨域

day04

一、昨日内容回顾

二、今日内容

跨域

Django跨域请求问题的解决方法示例

django跨域问题解决

1. django-cors-headers扩展

2. 安装

3. 添加应用

4. 配置中间件

5. 添加白名单

6. 跨域实现流程为

django跨域问题

方案二

一、 Access-Control-Allow-Origin

Django 跨域问题解决

vue和django跨域问题的解决

一招彻底解决Django跨域请求问题

配置django跨域

Python中Django跨域解决方法

django跨域配置，Vue跨域配置

Django跨域资源共享问题(推荐)

Django跨域配置

Django跨域请求CSRF的方法示例

Django+vue跨域问题解决的详细步骤

Django 跨域请求处理的示例代码

vue+django跨域问题解决方案（前后端两种方案）

彻底解决django跨域问题

pycharm + django跨域无提示的解决方法

Django跨域

vue与django跨域问题

用CORS 解决vue.js django跨域调用

Django跨域请求原理及实现代码

django跨域

Django 跨域

day04

一、 昨日内容回顾

二、今日内容

跨域

Django跨域请求问题的解决方法示例

django跨域问题解决

1. django-cors-headers扩展

2. 安装

3. 添加应用

4. 配置中间件

5. 添加白名单

6. 跨域实现流程为

django跨域问题

方案二

一、 Access-Control-Allow-Origin

Django 跨域问题解决

vue和django跨域问题的解决

一招彻底解决Django跨域请求问题

配置django跨域

Python中Django跨域解决方法

django跨域配置，Vue跨域配置

Django跨域资源共享问题(推荐)

Django跨域配置

Django跨域请求CSRF的方法示例

Django+vue跨域问题解决的详细步骤

Django 跨域请求处理的示例代码

vue+django跨域问题解决方案（前后端两种方案）

彻底解决django跨域问题

pycharm + django跨域无提示的解决方法

Django跨域

vue与django跨域问题

用CORS 解决vue.js django跨域调用

Django跨域请求原理及实现代码

django跨域

一、昨日内容回顾