当前位置: 首页 > news >正文

【三.项目引入axios、申明全局变量、设置跨域】

根据前文《二.项目使用vue-router,引入ant-design-vue的UI框架,引入less》搭建好脚手架后使用

需求:
1.项目引入axios
2.申明全局变量
3.设置跨域

简介:axios本质上还是对原生XMLHttpRequest的封装,可用于浏览器和nodejs的HTTP客户端,只不过它是基于Promise的,符合最新的ES规范。具备以下特点:

1.在浏览器中创建XMLHttpRequest请求

2.在node.js中发送http请求

3.支持Promise API

4.拦截请求和响应

5.转换请求和响应数据

6.取消请求

7.自动转换JSON数据

8.客户端支持防止CSRF/XSRF(跨域请求伪造)

1.引入axios

1.在终端执行命令

yarn add axios@0.19.2  --save-dev

2.在main.js文件里申明axios

import axios from "axios";
Vue.prototype.$axios = axios;

3.在src\utlis文件夹下创建request.js文件,代码如下

import axios from "axios";
import { getURLRouteParams } from "@/utils/routeUtil";
// 跨域认证信息 header 名
const xsrfHeaderName = "Authorization";
//请求超时时长
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
axios.defaults.xsrfHeaderName = xsrfHeaderName;
axios.defaults.xsrfCookieName = xsrfHeaderName;
//请求的域名
axios.defaults.baseURL = process.env.VUE_APP_AXIOS_BASE_URL;/*** axios请求* @param url 请求地址* @param method {METHOD} http method* @param params 请求参数* @returns {Promise<AxiosResponse<T>>}*/
async function request(config) {// 登录时,从地址拦获取项目参数const routeParams = getURLRouteParams();/*** 公共headers 参数* 当前项目 appid projectid* 如果url携带参数 route params 方式  /app/xxxx/project/xxxx 则优先使用 params参数*/const CommonHeaders = Object.assign({}, routeParams);return axios.request({timeout: 10000,withCredentials: true,xsrfHeaderName: xsrfHeaderName,xsrfCookieName: xsrfHeaderName,baseURL: process.env.VUE_APP_AXIOS_BASE_URL,...config,headers: Object.assign(CommonHeaders, config.headers)});
}/*** 加载 axios 拦截器* @param interceptors* @param options*/
function loadInterceptors(interceptors, options) {const { request, response } = interceptors;// 加载请求拦截器request.forEach(item => {let { onFulfilled, onRejected } = item;if (!onFulfilled || typeof onFulfilled !== "function") {onFulfilled = config => config;}if (!onRejected || typeof onRejected !== "function") {onRejected = error => Promise.reject(error);}axios.interceptors.request.use(config => onFulfilled(config, options),error => onRejected(error, options));});// 加载响应拦截器response.forEach(item => {let { onFulfilled, onRejected } = item;if (!onFulfilled || typeof onFulfilled !== "function") {onFulfilled = response => response;}if (!onRejected || typeof onRejected !== "function") {onRejected = error => Promise.reject(error);}axios.interceptors.response.use(response => onFulfilled(response, options),error => onRejected(error, options));});
}export { request, loadInterceptors };

4.在src\utlis文件夹下创建routeUtil.js文件,代码如下

// 全局 app 应用类型 key  携带在request的headers的参数
const GLOBAL_APP_KEY = "app";
// 全局 project 项目 key 携带在request的headers的参数
const GLOBAL_PROJECT_KEY = "project";/*** 获取地址栏 route params 方式参数* @param {String} url 路径*/
export const getURLRouteParams = path => {const url = path || window.location.pathname;const params = {};const keys = url.indexOf("/") != -1 ? url.split("/") : "";// 当前应用参数 应为常量 且其它url禁止使用此参数const keyList = [GLOBAL_APP_KEY, GLOBAL_PROJECT_KEY];keyList.forEach(e => {const index = keys.indexOf(e); // 查找匹配的第一项 防止用户可能设置多个同名参数if (keys[index + 1]) params[`${e}_id`] = keys[index + 1];});return params;
};

5.新建api接口的文件

在src\api里新建music.js文件

import { request } from "@/utils/request";const musicAPI = {musicDetails: "/music/music-api.php"
};/*** 获取播放链接* @param {*} data* @returns*/
export const musicDetails = msg => {return request({url: musicAPI.musicDetails + "?msg=" + msg + "&type=json&n=1",method: "get"});
};

6.调用接口

在src\page\music的index.vue文件里,代码如下

<template><div>播放器</div>
</template>
<script>
import { musicDetails } from "@/api/music";
export default {name: "music",data() {return {};},created() {this.load_Init();},methods: {load_Init() {musicDetails("乌梅子酱").then((res) => {console.log(res);}).catch((err) => {this.$message.error(err);});},},
};
</script>
<style lang="less" scoped>
</style>

2.申明全局变量

类似于node中的process.env, webpack中也有相对应的env变量来区分不同的环境。
在config下的dev.env.js文件里配置开发环境的全局变量,代码设置如下

"use strict";module.exports = {NODE_ENV: '"development"',//url的VUE_APP_PATH: '"/"',//axios的VUE_APP_AXIOS_BASE_URL: '"/api"',// 开发环境 APIVUE_APP_API_BASE_URL: '"https://ml.v.api.aa1.cn"'
};

在这里插入图片描述

然后使用console.log文件打印

  console.log(process.env,process.env.VUE_APP_AXIOS_BASE_URL,process.env.VUE_APP_API_BASE_URL);

效果:
在这里插入图片描述
注意点:
1.申明变量需要使用单引号+双引号( ‘“/”’)

3.设置跨域

在config文件夹下的index.js文件proxyTable里加入如下代码,然后重新运行项目,即可请求

 "/api": {target: "https://ml.v.api.aa1.cn", //ip地址changeOrigin: true, //是否跨域pathRewrite: {"^/api": "" //重写为空,这个时候api就相当于上面target接口基准地址}}

在这里插入图片描述
放到浏览器请求效果:
在这里插入图片描述

相关文章:

【三.项目引入axios、申明全局变量、设置跨域】

根据前文《二.项目使用vue-router,引入ant-design-vue的UI框架&#xff0c;引入less》搭建好脚手架后使用 需求&#xff1a; 1.项目引入axios 2.申明全局变量 3.设置跨域 简介&#xff1a;axios本质上还是对原生XMLHttpRequest的封装&#xff0c;可用于浏览器和nodejs的HTTP客…...

启动u盘还原成普通u盘(Windows Diskpart)

使用windows系统的diskpart 命令解决系统盘恢复成普通U盘的问题&#xff1a;1. 按Windows R键打开运行窗口。在搜索框中输入“ Diskpart ”&#xff0c;然后按 Enter 键。2. 现在输入“ list disk ”并回车。3. 然后输入“ select disk X ”&#xff08;将 X 替换为可启动U盘的…...

深入理解机器学习——偏差(Bias)与方差(Variance)

分类目录&#xff1a;《深入理解机器学习》总目录 偏差&#xff08;Bias&#xff09;与方差&#xff08;Variance&#xff09;是解释学习算法泛化性能的一种重要工具。偏差方差分解试图对学习算法的期望泛化错误率进行拆解&#xff0c;我们知道&#xff0c;算法在不同训练集上学…...

分布式新闻项目实战 - 13.项目部署_持续集成(Jenkins) ^_^ 完结啦 ~

欲买桂花同载酒&#xff0c;终不似&#xff0c;少年游。 系列文章目录 项目搭建App登录及网关App文章自媒体平台&#xff08;博主后台&#xff09;自媒体文章审核延迟任务kafka及文章上下架App端文章搜索后台系统管理Long类型精度丢失问题定时计算热点文章&#xff08;xxl-Job…...

Linux c/c++技术方向分析

一、C与C介绍 1.1 说明 c语言是一门面向过程的、抽象化的通用程序设计语言&#xff0c;广泛应用于底层开发&#xff0c;如嵌入式。C语言能以简易的方式编译、处理低级存储器。是一种高效率程序设计语言。 c&#xff08;c plus plus&#xff09;是一种计算机高级程序设计语言&a…...

JavaScript 高级3 :函数进阶

JavaScript 高级3 &#xff1a;函数进阶 Date: January 19, 2023 Text: 函数的定义和调用、this、严格模式、高阶函数、闭包、递归 目标&#xff1a; 能够说出函数的多种定义和调用方式 能够说出和改变函数内部 this 的指向 能够说出严格模式的特点 能够把函数作为参数和返…...

【项目】Java树形结构集合分页,java对list集合进行分页

Java树形结构集合分页需求难点实现第一步&#xff1a;查出所有树形集合数据 &#xff08;需进行缓存处理&#xff09;selectTree 方法步骤&#xff1a;TreeUtil类&#xff1a;第二步&#xff1a;分页 GoodsCategoryController分页getGoodsCategoryTree方法步骤&#xff1a;第三…...

java.lang.IllegalArgumentException: itemView may not be null

报错截图&#xff1a;场景介绍&#xff1a;在使用recycleView 自动递增数据&#xff0c;且自动滚动到最新行&#xff1b; 当数据达到273条 时出现ANR&#xff1b;项目中 全部的列表适配器使用的三方库&#xff1a;BaseRecyclerViewAdapterHelper &#xff08;很早之前的项目&am…...

[ 攻防演练演示篇 ] 利用 shiro 反序列化漏洞获取主机权限

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

达人合作加持品牌布局,3.8女神玩转流量策略!

随着迅猛发展的“她经济”&#xff0c;使社区本就作为内容种草的平台&#xff0c;自带“营销基因”。在3.8女神节即将到来之际&#xff0c;如何充分利用平台女性资源优势&#xff0c;借助达人合作等手段&#xff0c;实现迅速引流&#xff0c;来为大家详细解读下。一、小红书节日…...

观点丨Fortinet谈ChatGPT火爆引发的网络安全行业剧变

FortiGuard报告安全趋势明确指出“网络攻击者已经开始尝试AI手段”&#xff0c;ChatGPT的火爆之际的猜测、探索和事实正在成为这一论断的佐证。攻守之道在AI元素的加持下也在悄然发生剧变。Fortinet认为在攻击者利用ChatGPT等AI手段进行攻击的无数可能性的本质&#xff0c;其实…...

工业企业用电损耗和降损措施研究

来自用电设备和供配电系统的电能损耗。而供配电系统的电能损耗,包括企业变配电设备、控制设备企业在不断降低生产成本,追求经济效益的情况下,进一步降低供配电系统中的电能损耗,使电气设摘要:电网电能损耗是一个涉及面很广的综合性问题,主要包括管理损耗和技术损耗两部分…...

高并发、高性能、高可用

文章目录一、高并发是什么&#xff1f;二、 高性能是什么三、 高可用什么是一、高并发是什么&#xff1f; 示例&#xff1a;高并发是现在互联网分布式框架设计必须要考虑的因素之一&#xff0c;它是可以保证系统能被同时并行处理很多请求&#xff0c;对于高并发来说&#xff0…...

剑指 Offer 62. 圆圈中最后剩下的数字

摘要 剑指 Offer 62. 圆圈中最后剩下的数字 一、约瑟夫环解析 题目中的要求可以表述为&#xff1a;给定一个长度为 n 的序列&#xff0c;每次向后数 m 个元素并删除&#xff0c;那么最终留下的是第几个元素&#xff1f;这个问题很难快速给出答案。但是同时也要看到&#xff…...

概率论小课堂:高斯分布(正确认识大概率事件)

文章目录 引言I 预备知识1.1 正态分布1.2 置信度1.3 风险II 均值、标准差和发生概率三者的关系。2.1 “三∑原则”2.2 二班成绩比一班好的可能性2.3 减小标准差引言 泊松分布描述的是概率非常小的情况下的统计规律性。学习高斯分布来正确认识大概率事件,随机变量均值的差异和偶…...

剑指 Offer 43. 1~n 整数中 1 出现的次数

摘要 剑指 Offer 43. 1&#xff5e;n 整数中 1 出现的次数 一、数学思维解析 将1~ n的个位、十位、百位、...的1出现次数相加&#xff0c;即为1出现的总次数。 设数字n是个x位数&#xff0c;记n的第i位为ni​&#xff0c;则可将n写为 nxnx−1⋯n2n1&#xff1a; 称" …...

如何成为程序员中的牛人/高手?

目录 一、牛人是怎么成为牛人的&#xff1f; 二、关于牛人的一点看法 三、让程序员与业务接壤&#xff0c;在开发团队中“升级” 四、使用低代码平台 目标效果 五、最后 祝伟大的程序员们梦想成真、码到成功&#xff01; 一、牛人是怎么成为牛人的&#xff1f; 最近在某…...

云原生时代顶流消息中间件Apache Pulsar部署实操之轻量级计算框架

文章目录Pulsar Functions(轻量级计算框架)基础定义工作流程函数运行时处理保证和订阅类型窗口函数定义窗口类型滚动窗口滑动窗口函数配置函数示例有状态函数示例窗口函数示例自定义函数开发定义原生语言接口示例Pulsar函数SDK示例Pulsar Functions(轻量级计算框架) 基础定义 …...

数据结构刷题(十九):77组合、216组合总和III

1.组合题目链接过程图&#xff1a;先从集合中取一个数&#xff0c;再依次从剩余数中取k-1个数。思路&#xff1a;回溯算法。使用回溯三部曲进行解题&#xff1a;递归函数的返回值以及参数&#xff1a;n&#xff0c;k&#xff0c;startIndex(记录每次循环集合从哪里开始遍历的位…...

PyQt 做美*女GIF设置桌面,每天都很爱~

人生苦短&#xff0c;我用python 要说程序员工作的最大压力不是来自于工作本身&#xff0c; 而是来自于需要不断学习才能更好地完成工作&#xff0c; 因为程序员工作中面对的编程语言是在不断更新的&#xff0c; 同时还要学习熟悉其他语言来提升竞争力… 好了&#xff0c;学习…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...