一:跨域问题

  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的使用的更多相关文章

  1. vue跨域处理(vue项目中baseUrl设置问题)

    1.开发环境: 2.生产环境: 然后 const instance = axios.create({ baseURL: process.env.API })

  2. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  3. 《Asp.Net Core3 + Vue3入坑教程》 - Vue 1.使用vue-cli创建vue项目

    简介 <Asp.Net Core3 + Vue3入坑教程> 此教程适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 目录 & ...

  4. 如何创建vue项目

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  5. Django 处理跨域的配置、前台处理ajax

    一. Django处理跨域 跨域的处理方式有很多,使用最多的就是CORS(跨域资源共享),接下来大致提一下django中处理跨域的配置. 首先安装django-cors-headers模块: pip ...

  6. Django cors跨域问题

    Django cors跨域问题 前后端分离项目中的跨域问题 即同源策略 同源策略:同源策略/SOP(Same origin policy)是一种约定,由 Netscape 公司 1995 年引入浏览器 ...

  7. 使用vue-cli创建vue项目

    vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...

  8. Vue2+Webpack创建vue项目

    相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...

  9. 通过脚手架创建Vue项目

    第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vu ...

随机推荐

  1. 「 poj 2096 」 Collecting Bugs

    先说一下题意 $s$ 个子系统还中有 $n$ 种 $\text{bug}$,每天可以随机选择一种 $\text{bug}$,问选出 $n$ 种 $\text{bug}$ 在 $s$ 种子系统中的期望天 ...

  2. 用python写了一个猜年龄小游戏

    写一个猜年龄游戏: 需要实现用户登录的功能 初始用户登录信息为 {'hades': '13579','nick': '123','ruixing': 'a1','fanping': 'b2'} 登录时 ...

  3. SQL学习笔记:库和表的创建

    目录 创建和删除数据库 创建和删除表 添加.修改和删除字段 创建和删除数据库 CREATE DATABASE justForLearn; DROP DATABASE justForLearn; 创建和 ...

  4. Vue.Draggable实现拖拽效果(快速使用)

    1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": & ...

  5. 【Codeforces 300C】Beautiful Numbers

    [链接] 我是链接,点我呀:) [题意] 让你找到长度为n的数字 这个数字只由a或者b组成 且这n个数码的和也是由a或者b组成的 求出满足这样要求的数字的个数 [题解] 枚举答案数字中b的个数为y,那 ...

  6. 【Codeforces 493D】Vasya and Chess

    [链接] 我是链接,点我呀:) [题意] [题解] 会发现两个皇后之间如果只有奇数个位置 也就是n%2==1 那么第二个人总是赢的 因为如果white往下跑的话,black也能往下跑. 第二个人没有输 ...

  7. Java Web学习总结(31)——全站HTTPS化SSL免费证书使用

    1 背景 谷歌从 2017 年起,Chrome 浏览器将也会把采用 HTTP 协议的网站标记为「不安全」网站:苹果从 2017 年 iOS App 将强制使用 HTTPS:在国内热火朝天的小程序也要求 ...

  8. 使用lombok提高编码效率-----不用写get set

    使用lombok提高编码效率-----不用写get    set https://blog.csdn.net/v2sking/article/details/73431364

  9. Spring @Conditional注解 详细讲解及示例

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/xcy1193068639/article/details/81491071 前言: @Conditi ...

  10. bridge 上网

    手头有一台机器上有一个虚拟机 虚拟机为桥接 本机为静态IP上网 想让虚拟机上网的方式是 本机不设ip 网卡设置DHCP. 虚拟机设置静态ip