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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
微信小程序日历效果
Dec 29 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 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
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
Angular2库初探
2017/03/01 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
Python实现栈的方法
2015/05/26 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
pandas带有重复索引操作方法
2018/06/08 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python request中文乱码问题解决方案
2020/09/17 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
制药工程专业毕业生推荐信
2013/12/24 职场文书
益达广告词
2014/03/14 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
创建文明城市标语
2014/06/16 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
golang json数组拼接的实例
2021/04/28 Golang
如何使用pdb进行Python调试
2021/06/30 Python
java多态注意项小结
2021/10/16 Java/Android