1. 始vue化项目

vue init webpack deaxios # 使用脚手架创建项目 deaxios(项目名,随便取得)
cd deaxios # 进入项目
cnpm install
npm install axios -S # 安装axios

2.封装axios

2.1 src文件夹下新建http文件夹, 用来放网络请求相关的文件

2.2 src/http 文件夹下, 创建 index.js 文件, 对axios进行封装

/* eslint-disable */ 
//第一步:实例化axios对象,并设置 1.请求地址;2.超时时间;3.设置请求头数据格式 
const axios = require('axios'); // 创建axios对象 
// import qs from 'qs' 
axios.defaults.baseURL = 'http://192.168.56.100:8888'; // vue请求后端地址 axios.defaults.timeout = 10000; // 多久超时
axios.defaults.withCredentials = true; // 跨域访问需要发送cookie 时一定要加axios.defaults.withCredentials = true;

/*** 设置请求传递数据的格式(看服务器要求的格式) 
* x-www-form-urlencoded
 * 默认提交表单
 * 把数据对象序列化成 表单数据 

*/
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; // axios.defaults.transformRequest = data => qs.stringify(data);
 /**

* 设置默认提交 json
* 把数据对象序列化成 json 字符串 
*/
axios.defaults.headers['Content-Type'] = 'application/json'; // 设置默认提 交 json axios.defaults.transformRequest = data => JSON.stringify(data); // 把数据对象 序列化成 json 字符串

// 第二步:对请求拦截器,和响应拦截器进行封装 
/**
* 请求拦截器: 发送请求前需要调用这个函数 
1.当没有登录时,直接跳转到登录页 
2.请求发送前把token获取,设置到header中 
*/

axios.interceptors.request.use(config => {
     // 从localStorage中获取token
     let token = localStorage.getItem('token'); 
    // 如果有token, 就把token设置到请求头中Authorization字段中
     token && (config.headers.Authorization = token); 
    return config; 
}, error => {
     return Promise.reject(error); 
});

/**
 * 响应拦截器:当后端返回数据给vue时会调用这个函数
 1.没次返回403错误时,跳转到login 
 */ 
axios.interceptors.response.use(response => { 
    // 当响应码是 2xx 的情况, 进入这里 
    debugger 
    return response.data;
 }, error => {
     // 当响应码不是 2xx 的情况, 进入这里
     debugger 
     return error
 });

//第三步:使用上面的axios对象,对get请求和post请求进行封装
 /**
* get方法,对应get请求 
* @param {String} url [请求的url地址] 
* @param {Object} params [请求时携带的参数] 
*/
 export function get(url, params, headers) { 
    return new Promise((resolve, reject) => {
     axios.get(url, { params, headers }).then(res => {             
        resolve(res.data.ResultObj) 
     }).catch(err => {
         resolve (err.data) 
    }) 
  }) 
}

/**
 * post方法,对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
**/ 
export function post(url, params, headers) {
     
    return new Promise((resolve, reject) => {
         axios.post(url, params, headers).then((res) => { 
            resolve(res.data)
         }).catch((err) => {
            debugger 
            reject(err.data) 
        }) 
    })
}
export default axios; //一定要导出函数

2.3 src/http 目录下创建 apis.js文件, 用来写 接口地址列表  

  

/* eslint-disable */
// 接口信息, 生成请求方法
// 引入 get方法, post方法
import { get, post } from './index'
// 用户登录
export const login = (params, headers) => post("/user/login/", params, headers)

  

2.django cors设置:

INSTALLED_APPS = [
...
#添加 django-cors-headers 使其可以进行 cors 跨域
'corsheaders'
]

  

3. 添加中间件

MIDDLEWARE = [

放在中间件第一个
'corsheaders.middleware.CorsMiddleware', #第三行
...
]

  

4 跨域白名单

CORS_ORIGIN_WHITELIST = (

'http://127.0.0.1:8080',
'http://localhost:8080',
)
CORS_ALLOW_CREDENTIALS = True # 允许携带cookie

  

axios 封装 跨域 实现 (后端跨域配置白名单)的更多相关文章

  1. 切换路由时取消全部或者部分axios请求,并将一些从不需要取消的加入白名单

    1. axios拦截器进行配置,除了白名单中的接口,统统保存到全局变量canCancelAxios中 window.canCancelAxios = []; // http request 拦截器 a ...

  2. vue-cli3中axios如何跨域请求以及axios封装

    1. vue.config.js中配置如下 module.exports = { // 选项... // devtool: 'eval-source-map',//开发调试 devServer: { ...

  3. 使用nginx反向代理处理前后端跨域访问

    本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...

  4. nginx解决跨域(前后端分离)

    Nginx解决跨域问题 后端接口 请求地址 返回数据(json数据) http://127.0.0.1:8080//app Hello World! 前端代码 通过nginx做静态资源服务器访问端口8 ...

  5. Api之Cors跨域以及其他跨域方式

    Web Api之Cors跨域以及其他跨域方式(三)   我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还 ...

  6. VUE006. 前端跨域代理服务器ProxyTable概述与配置

    概述 使用  vue-cli  工具生成一个  vue  项目: vue init webpack my-project-vue 在生成的项目结构里,会有一个  index.js  文件.在这个文件里 ...

  7. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. 跨域学习笔记1--跨域调用webapi

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...

随机推荐

  1. 这 5 个开源的能挣钱的 SpringBoot 项目,真TMD香!

    不得不佩服 Spring Boot 的生态如此强大,今天我给大家推荐几款 Gitee 上优秀的后台开源版本的管理系统,小伙伴们再也不用从头到尾撸一个项目了,简直就是接私活,挣钱的利器啊. SmartA ...

  2. [LeetCode题解]234. 回文链表 | 快慢指针 + 反转链表

    解题思路 找到后半部分链表,再反转.然后与前半部分链表比较 代码 /** * Definition for singly-linked list. * public class ListNode { ...

  3. 从 3.1 到 5.0 —— OpenReservation 更新记

    OpenReservation 从 asp.net core 3.1 到 5.0 Intro OpenReservation 是一个开源的预约系统,最初的版本是我们学校的活动室预约系统,现在正逐步变成 ...

  4. OxyPlot组件的基本使用

    在制作上位机的时候,很多时候需要使用到监控绘图界面,使用来绘制曲线的组件有很多,GDI+.char.OxyPlot等等,这篇文章用来介绍OxyPlot组件的基本应用,在本文中主要是利用随心数生成函数结 ...

  5. 深度分析:Java多线程,线程安全,并发包

    1:synchronized(保证原子性和可见性) 1.同步锁.多线程同时访问时,同一时刻只能有一个线程能够访问使synchronized修饰的代码块或方法.它修饰的对象有以下几种: 修饰一个代码块, ...

  6. css3系列之详解border-radius

    border-radius border-radius 几种写法: 1.border-radius: 50%; 以正方形为例子, 这样写就是设置 4个角 为50%. 2.border-radius: ...

  7. And Or IN Not操作符

    再sql中And比or运算符优先级要更高,比如说  条件1 Or 条件2 And 条件3     如果先执行or,就是1or2   再and3 但是实际上是  2and3 再or 1,所以如果想要 1 ...

  8. 地图上显示点在点上标注当前点的id

    HTML: <div class="form-group field-company-state"> <div style="width:1000px; ...

  9. LeetCode周赛#204 题解

    1566. 重复至少 K 次且长度为 M 的模式 #模拟 题目链接 题意 给定正整数数组 arr,请你找出一个长度为 m 且在数组中至少重复 k 次的模式. 模式 是由一个或多个值组成的子数组(连续的 ...

  10. 分布式系统唯一ID

    一 什么是分布式系统唯一ID 在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识. 如在金融.电商.支付.等产品的系统中,数据日渐增长,对数据分库分表后需要有一个唯一ID来标识一条数据或消息, ...