Django day32 跨域问题,创建vue项目,axios的使用
一:跨域问题
1、同源策略(浏览器的安全策略)
只允许当前页面朝当前域下发请求,如果向其他域发请求,请求可以正常发送,数据也可以拿回,但是被浏览器拦截了
2、cors:只要服务器实现了CORS,就可以实现跨域资源共享
(1)简单请求
只发一次请求
(2)非简单请求:
发两次请求:一次预检(OPTION请求),只有服务端允许发请求,才能继续发第二次正常请求,一次真正的请求
3、服务端如何处理:
(1)写在中间件中:
from django.utils.deprecation import MiddlewareMixin
class MyCorsMiddle(MiddlewareMixin):
def process_response(self,request,response):
# 简单请求:
# 允许http://127.0.0.1:8001域向我发请求
# ret['Access-Control-Allow-Origin']='http://127.0.0.1:8001'
# 允许所有人向我发请求
response['Access-Control-Allow-Origin'] = '*'
if request.method == 'OPTIONS':
# 所有的头信息都允许
response['Access-Control-Allow-Headers'] = '*'
return response
(2)在setting中配置中间件即可
二:创建vue项目
1、创建vue项目:
(1)安装node.js
(2)vue脚手架
(2)项目名字:vue create
(4)pycharm开发vue项目:
需要安装vue.js插件
setting--->plugins--->左下方install---->去搜索---->下载--->重启
(5)运行vue项目
editconfigration--->+--->npm--->run serve
2、vue目录结构:
node_modules:项目依赖(以后项目要传到git上,这个不能传)
publish--->index.html 是总页面
src:项目
assets:静态资源
components:组件
views:视图组件
APP.vue:根组件
main.js :总的入口js
router.js :路由相关,所有路由的配置,在这里面
store.js :vuex状态管理器
package.json:项目的依赖,npm install 是根据它来安装依赖的
3、每个组件会有三部分:
(1)template
(2)style
(3)script
三:axios的使用
Django day32 跨域问题,创建vue项目,axios的使用的更多相关文章
- vue跨域处理(vue项目中baseUrl设置问题)
1.开发环境: 2.生产环境: 然后 const instance = axios.create({ baseURL: process.env.API })
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- 《Asp.Net Core3 + Vue3入坑教程》 - Vue 1.使用vue-cli创建vue项目
简介 <Asp.Net Core3 + Vue3入坑教程> 此教程适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 目录 & ...
- 如何创建vue项目
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- Django 处理跨域的配置、前台处理ajax
一. Django处理跨域 跨域的处理方式有很多,使用最多的就是CORS(跨域资源共享),接下来大致提一下django中处理跨域的配置. 首先安装django-cors-headers模块: pip ...
- Django cors跨域问题
Django cors跨域问题 前后端分离项目中的跨域问题 即同源策略 同源策略:同源策略/SOP(Same origin policy)是一种约定,由 Netscape 公司 1995 年引入浏览器 ...
- 使用vue-cli创建vue项目
vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...
- Vue2+Webpack创建vue项目
相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...
- 通过脚手架创建Vue项目
第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vu ...
随机推荐
- 51nod1429 巧克力
[题解] 找一下两个面积s1,s2的2和3的因子数,把他们除掉,如果s1,s2不相等,就是-1,否则可以用s1,s2的2和3的因子数计算答案. #include<cstdio> #incl ...
- Shiro_DelegatingFilterProxy
1.DelegatingFilterProxy实际上是Filter的一个代理对象.默认情况下,Spring会到IOC容器中查找与<filter-name>对应的filter bean.也可 ...
- CodeForcesGym 100753B Bounty Hunter II
Bounty Hunter II Time Limit: 5000ms Memory Limit: 262144KB This problem will be judged on CodeForces ...
- 添物零基础到大型全栈架构师 不花钱学计算机及编程(预备篇)— C语言编程基础
C语言介绍 C语言基本是每个编程人员必学的一面语言,很好掌握,是理解编程的关键.很多编程语言基于其编写或者基于此语言的衍生品编写. C语言是人机交互的一个基础语言之一,虽然是之一,单一般其实就是唯一 ...
- PhantomJS & headless browser & pdf
PhantomJS http://phantomjs.org/ https://github.com/Medium/phantomjs https://github.com/Medium/phanto ...
- POJ 2115 简单的模线性方程求解
简单的扩展欧几里得题 这里 2^k 不能自作聪明的用 1<<k来写 , k >= 31时就爆int了 , 即使定义为long long 也不能直接这样写 后来老老实实 for(int ...
- poj 2455
题意:由一个点走到另一个点,中间的点可以重复到达,但边只能经过一次,问T条边不重复的路径里,最长的边的最小值. 分析:由于点是可以重用的,因此不必拆点.这道题有重边,而且重边都必须保留,因为点是可以重 ...
- [codevs 1183][泥泞的道路(二分+spfa)
题目:http://dev.codevs.cn/problem/1183/ 分析:这个和最优比率生成树很像,都可以二分答案的,只不过判定方面一个是求是否有最短路径,一个是求是否有生成树.假设等待判定的 ...
- - > 并查集+路径压缩(详解)(第一节)
先举一个友爱的例子解释一下并查集: 话说江湖上散落着各式各样的大侠,有上千个之多. 他们没有什么正当职业,整天背着剑在外面走来走去,碰到和自己不是一路人的,就免不了要打一架.但大侠们有一个优点就是讲义 ...
- Java设计模式补充:回调模式、事件监听器模式、观察者模式(转)
一.回调函数 为什么首先会讲回调函数呢?因为这个是理解监听器.观察者模式的关键. 什么是回调函数 所谓的回调,用于回调的函数. 回调函数只是一个功能片段,由用户按照回调函数调用约定来实现的一个函数. ...