解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道
在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了好多资料现在解决了这个问题,记录一下。
Django配置
- 首先在Django框架里面要安装django-cors-headers包,在项目根目录下执行
pip install django-cors-headers
- 配置settings.py
引入刚刚安装的包
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders' #刚才安装的django-cors-headers包所引入的app
]
配置参数
在配置文件中加入以下内容,可根据自己的情况作调整DEBUG = True #开启debug模式,注意上线运营时要关闭debug
ALLOWED_HOSTS = ['*'] # 允许所有ip访问
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_HEADERS = ('*') #允许所有的请求头配置中间件
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',
]
- 首先在Django框架里面要安装django-cors-headers包,在项目根目录下执行
Vue配置
一般情况下Vue中往后端请求的话都是通过axios安装axios
npm install axios
Vue的main.js配置axios
//配置请求头,非常重要,有了这个才可以正常使用POST等请求后台数据
axios.defaults.headers.post['Content-Type'] = 'application/x-www-fromurlencodeed'
到此为止,关于Django+Vue前后端分离的跨域问题就解决了,但是后来发现,还是无法请求到数据,因为Django有csrf验证,我们可以通过某种方式将其给关掉,下面就简单来了解一下:
在接收前端请求的文件中(我这边是view.py)中引入
from django.views.decorators.csrf import csrf_exempt
然后在每个不需要csrf验证的方法上方加上
@csrf_exempt
这样就可以了(或者是在settings文件中将csrf的中间件给注释掉也行)。
本文前半部分参考:django+vue打造前后端分离的项目时,跨域问题的解决!
如需转载,请注明出处:https://www.cnblogs.com/zhuchenglin/p/9732245.html
解决Django+Vue前后端分离的跨域问题及关闭csrf验证的更多相关文章
- 【笔记】总结Springboot和Vue前后端分离的跨域问题
跨域一直是个很玄学的问题,SSM的时候又得前后端一起配置,sb的时候又不用. 前端 axios普通get请求 submitForm() { var v=this; this.$axios({ meth ...
- React:快速上手(8)——前后端分离的跨域访问与会话保持
React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...
- php前后端分离项目跨域问题解决办法
由于之前一直没有做过前后端分离项目,导致走了不少弯路,而且还采用了一种及其不优雅的方法 (在第一次请求的时候把服务器返回的session id保存起来,后续请求的时候把该session id作为参数传 ...
- 【js】【跨域问题】前后端分离的跨域问题
最近在研究nodejs,php的前后端分离相关东西,在调用接口的时候碰到一些跨域的问题,经过一段时间的摸索,总结出来的一些东西 php采用的是yii框架,登录的机制或者调用接口都需要前端传递cooki ...
- 前后端分离之 跨域和JWT
书接上回:https://www.cnblogs.com/yangyuanhu/p/12081525.html 前后端分离案例 现在把自己当成是前端,要开发一个前后分离的简单页面,用于展示学生信息列表 ...
- spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据
1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...
- 利用CORS解决前后端分离的跨域资源问题
CORS 即CrossOrigin Resources Sharing-跨域资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求.它是一个妥协,有更大的灵活性,但比起简单地允许所有这些 ...
- SpringBoot 实现前后端分离的跨域访问(CORS)
序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...
- 前后端分离开发,跨域访问的apche设置
1,如何让Apache支持跨域访问呢? 步骤: 修改httpd.conf,windows中对应的目录是:C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf 把 ...
随机推荐
- django+uwsgi+nginx的部署
1.下载与项目对应的django版本pip3 install django==1.11.16 -i https://pypi.douban.com/simple/2.用django内置的wsgi模块测 ...
- selenium启动报错“ incorrect JSON status mapping for 'unknown error' (500 expected)”
前面讲了工程启动报错“selenium启动报错Unable to read VR Path Registry from C:\Users\clinva\AppData\Local\openvr\ope ...
- ogma
Ogma是Linkurious的JavaScript图形可视化库.Ogma的一个实例是一个javascript对象,它在内部存储一个图形, 并根据样式规则在HTML容器中呈现它. Ogma有两个版本: ...
- 关于Integer比较问题
public class Test { public static void main(String[] args) { Integer a=127; Integer b=127; System.ou ...
- 饮冰三年-人工智能-Python-27 Django Form组件
Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 后台逻辑(导包+建类) from django ...
- Jmeter组成结构及运行原理
Jmeter结构主要组成要素包括:测试计划,线程组,采样器以及监听器.对于各部件的作用域关系如下图: Jmeter是纯Java程序,使用JVM,运行采用多线程完成,往往单台负载机由于机器配置有限,支持 ...
- windows使用pyecharts报错 No module named 'pyecharts_snapshot
下载此文件后,使用命令 pip install pyecharts_snapshot-0.1.8-py2.py3-none-any.whl 安装完成即可 链接地址:https://pypi.org/p ...
- JAVA取数两个数组交集,考虑重复和不重复元素
1.考虑不重复元素,重复元素不添加 import java.awt.List; import java.util.ArrayList; import java.util.TreeSet; public ...
- XMLHttpRequest中常用的方法
a.) abort() 停止当前请求b.) getAllResponseHeaders() 把HTTP请求的所有响应首部作为键值对返回c.) open("method", &quo ...
- Excel 统计区间频数,按照条件标记
MS Office 2013 统计区间频数--countif函数 如要统计[75,90)区间段的成绩,使用 =COUNTIF(L3:L44, ">=75")-COUN ...