vue3.0+axios 跨域+封装
封装:
目录结构:src/utils/request.js, 没有就自己建一个
import axios from 'axios'
import { Message } from 'element-ui' // create an axios instance
const service = axios.create({
baseURL: '/gateway', //添加于请求路径前
timeout: 5000 // request timeout
}) service.interceptors.request.use( //请求拦截
config => {
const token = window.localStorage.getItem('token')
if (token) {
config.headers['autel-token'] = token //在请求之前,像 headers 里面携带token
}
// Do something before request is sent
if (
config.applicationType !== 'JSON' &&
config.url.indexOf('community-attachment') === -1
) { //对 post 请求 或 put 请求的数据做 JSON 转换
if (config.method === 'post' || config.method === 'put') {
let _data = ''
for (const it in config.data) {
const value = config.data[it] === null ? '' : config.data[it]
_data +=
encodeURIComponent(it) + '=' + encodeURIComponent(value) + '&'
}
config.data = _data
}
}
return config
},
error => {
// Do something with request error
return Promise.reject(error)
}
) service.interceptors.response.use( //对请求回来的数据做统一错误处理
response => {
const res = response
if (res.data.code !== 1) {
Message({
message: res.data.message || '不明错误',
type: 'error',
duration: 5 * 1000
})
}
// if the custom code is not 20000, it is judged as an error.
if (res.status !== 200) {
Message({
message: res.message || '不明错误',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
) export default service
跨域, 在 vue.config.js 里配置
module.exports = { devServer : {
proxy: {
'/gateway': { //由于我们上面在请求头里有添加 gatwat 所以能拦截
target: 'http://autel-cloud-gateway.dev.com', // 接口域名
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/gateway': ''
}
}
},
configureWebpack: {
resolve: {
alias: {
'@': resolve('src') //vue 代码里出现 @ ,表示 src 目录
}
}
}
}
}
使用
src/api/menu.js
import request from '@/utils/request' //添加菜单
export function addOrCompileMenu(data) {
return request({
url: '/api/admin/menu/saveMenu',
method: 'post',
applicationType: 'JSON', //这一段表示,是post 请求,就将 请求参数转换成 JSON 格式
data
})
}
src/views/menu.vue
import { getMenuList } from '@/api/menu'
methods: {
getMenuList({}).then(res => {
if (res.status === 200) {
this.list = res.data.data.menuVoList
}
})
}
vue3.0+axios 跨域+封装的更多相关文章
- vue-cli 3.0 axios 跨域请求代理配置及生产环境 baseUrl 配置
1. 开发环境跨域配置 在 vue.config.js 文件中: module.exports = { runtimeCompiler: true, publicPath: '/', // 设置打包文 ...
- vue-cli 3.0之跨域请求代理配置及axios路径配置
vue-cli 3.0之跨域请求代理配置及axios路径配置 问题:在前后端分离的跨域请求中,报跨域问题 配置: vue.config.js: module.exports = { runtimeCo ...
- vue-cli axios跨域 + 反向代理模拟http请求host+referer
axios跨域 配置config->index.js中的proxyTable,内容如下: proxyTable: { // 跨域请求 '/api': { // 注意此处可设置为 '*' 代表不限 ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- 使用ajax请求接口,跨域后cookie无法设置,全局配置ajax;及使用axios跨域后cookie无法设置,全局配置axios
问题一: 使用ajax/axios跨域请求接口,后端放行了,能够正常获取数据,但是cookie设置不进去,后端登录session判断失效 ajax解决办法: //设置ajax属性 crossDomai ...
- JS window.name跨域封装
JS window.name 跨域封装 function CrossDomainName(target, agent, callback, security) { if (typeof target ...
- axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数
1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...
- asp.net web api2.0 ajax跨域解决方案
asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种. 一,ASP.NET Web API支持JSONP,分两种 1, ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
随机推荐
- JZOJ 5307. 【NOIP2017提高A组模拟8.18】偷窃 (Standard IO)
5307. [NOIP2017提高A组模拟8.18]偷窃 (Standard IO) Time Limits: 1000 ms Memory Limits: 262144 KB Description ...
- NetAnalyzer笔记 之 十一 打造自己的协议分析语言(1)初衷与语法构想
回头看看NetAnalyzer开发系文档上次一篇竟然是2016年,老脸一红.不过这几年墨云成功过的讨到一个温柔贤淑的老婆,有了一个幸福的家庭,去年9月又有了一个大胖儿子,想想也就释然了^_^ 其实这几 ...
- 简单易懂的Servlet路径问题
关于servlet路径,我看了一下网上别人的博客园,发现都有一个通病,讲的太专业了,又抓不住关键部分,往往看一眼就不想看第二眼.所以我特地准备了初学者所通识的servlet路径问题. 1.标识符 /j ...
- vue中v-if和v-show的区别
v-if.v-show顾名思义就是用来判断视图层展示效果的. v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回真值的时候被渲染. v-show 指的是单纯的切换元素的样式dis ...
- centOS 6.5 yum升级 gcc4.8 然后又退回来4.4
CentOS 6.5 用了很多年了,一直舍不得省7 . 由于要用到 c++ 11 ,所以决定升级一下. 为了省事我选择用 yum 方式升级,结果最后还是不能用,差点搞坏,这是真机,重装麻烦了. get ...
- flink RPC(akka)
flink中的rpc框架使用的akka.在本节并不详细讲述akka,而是就flink中rpc来讲述akka的部分内容.本节,我从AkkaRpcActor.handleRpcInvocation方法讲起 ...
- Redis07——Redis到底能用在什么地方(下)
在前一篇文章中,我们已经介绍过Redis的一些实际应用.如KV缓存.分布式锁.消息队列,由于篇幅原因,并未介绍完全.接下来将继续为各位带来Redis的更多应用. bitmat(位图) 实现 位图的基本 ...
- vue 模板 template init
<template> <div> </div> </template> <script> export default { name: '模 ...
- SpringCloud微服务:Sentinel哨兵组件,管理服务限流和降级
源码地址:GitHub·点这里||GitEE·点这里 一.基本简介 1.概念描述 Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护服务的稳定性.包括核心的独立类库,监 ...
- DOM-XSS攻击原理与防御
XSS的中文名称叫跨站脚本,是WEB漏洞中比较常见的一种,特点就是可以将恶意HTML/JavaScript代码注入到受害用户浏览的网页上,从而达到劫持用户会话的目的.XSS根据恶意脚本的传递方式可以分 ...