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


Posted in Javascript onJanuary 20, 2019

跨域

由于开发模式为前后端分离式开发,故而通常情况下,前端和后端可能运行不同的ip或者port下,导致出现跨域问题,故而单独说明

什么是跨域

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。

其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。

什么是同源策略?

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

同源策略限制以下几种行为:

  1. Cookie、LocalStorage 和 IndexDB 无法读取
  2. DOM 和 Js对象无法获得
  3. AJAX 请求不能发送

跨域错误浏览器会在控制台中出现如下错误:

报错信息如下:

Access to XMLHttpRequest at ' http://127.0.0.1 :8000/api/test/' from origin ' http://127.0.0.1 :3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

翻译过来即是:从源地址 http://127.0.0.1 :3000 发起的到 http://127.0.0.1 :8000/api/test/ 的XMLHttpRequest访问违反了同源策略:因为在请求头中没有Access-Control-Allow-Origin的值

前端解决跨域

既然跨域是因为不同源,那我同源不就完事儿了,但是后端请求地址不可能改变,所以可以在前端和后端的中间加一层代理,前端通过代理访问后端。

在Vue-cli工具中已经提供了代理的功能,只需要配置即可。

在根目录下的config/index.js文件中有如下配置项:

proxyTable: {
   '/': { 
    target: 'http://127.0.0.1:8000/',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  },
  1. '/'表示以'/'(即所有的路径)开头的路径均需要代理,
  2. target:代理的目标服务器地址(即后端服务器地址)为 ' http://127.0.0.1 :8000/',
  3. changeOrigin,为修改源:修改请求中的源地址
  4. pathReWrite:URL路径重写,对于以'/api'开头的路径将'/api'替换为''

后端解决跨域

后端出于安全考虑,也会对于跨域有限制,解决方法如下:

安装django-cors-headers

$ pip install django-cors-headers

配置settings.py文件

INSTALLED_APPS = [
  ...
  'corsheaders',
  ...
 ] 

MIDDLEWARE_CLASSES = (
  ...
  'corsheaders.middleware.CorsMiddleware',
  'django.middleware.common.CommonMiddleware', # 注意顺序
  ...
)
#跨域增加忽略
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 = (
  'XMLHttpRequest',
  'X_FILENAME',
  'accept-encoding',
  'authorization',
  'content-type',
  'dnt',
  'origin',
  'user-agent',
  'x-csrftoken',
  'x-requested-with',
  'Pragma',
)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 #Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 #Javascript
JavaScript中concat复制数组方法浅析
Jan 20 #Javascript
JavaScript中import用法总结
Jan 20 #Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 #Javascript
js序列化和反序列化的使用讲解
Jan 19 #Javascript
vue-router传参用法详解
Jan 19 #Javascript
You might like
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
javaScript对象和属性的创建方法
2007/01/15 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
javascript生成大小写字母
2015/07/03 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
python 内置模块详解
2019/01/01 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
Python中生成ndarray实例讲解
2021/02/22 Python
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
什么是URL
2015/12/13 面试题
《傅雷家书》教学反思
2014/04/20 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
python自然语言处理之字典树知识总结
2021/04/25 Python
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS