vue版公共请求方法

OPTIONS请求(跨域预检查) 阅读详情
import axios from "axios";
import Qs from "qs";
import API_BASE_URL from "@/api/api.js";
const Http = axios.create({
  baseURL: API_BASE_URL,
  timeout: 6000, // 设置超时时间6s
  withCredentials: true, // cross-site Access-Control
});

// 设置post请求头
Http.default.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded;charset=UTF-8";

//设置请求拦截器
Http.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
//设置请求响应器
Http.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    return Promise.resolve(error.response);
  }
);

/**
 * HTTP 请求工具函数
 * @param {String} method  请求的方法:get、post、delete、put
 * @param {String} url     请求的url:
 * @param {Object} data    请求的参数
 * @returns {Promise}     返回一个promise对象,其实就相当于axios请求数据的返回值
 */

export const API = (method, url, data = null) => {
  method = method.toLowerCase();
  if (method === "post") {
    return Http.post(url, data);
  } else if (method === "get") {
    return Http.get(url, { params: data });
  } else {
    console.error("未知的method" + method);
    return false;
  }
};

 

Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ he 当你的拦截器拦截到这种OPTIONS请求时,如果没有正确地处理(例如,返回正确的CORS头部信息),那么浏览器就会认为服务器是不可连接到的所以阻止实际的请求发送,所以我们需要确保拦截器在处理OPTIONS请求时,返回正确的CORS头部信息。预检请求是一种由浏览器自动发送的、使用OPTIONS方法的HTTP请求,它用于检查实际请求是否可以被服务器接受。使用axios请求,并在请求头添加token,发送请求,后端能成功接收请求,但请求头没有token,导致过滤器拿不到token进行校验。 阅读详情

相关推荐

vue.cli项目封装全局axios,封装请求,封装公共的api和调用请求的全过程

vue项目的前期配置 封装axios实例 封装API

JCat的博客 10万+

使用CORS解决跨域问题

1.跨域问题 1.1 什么是跨域 跨域是指跨域名的访问,以下情况都属于跨域: 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同,端口不同 www.jd.com:8080 与 www.jd.com:8081 二级域名不同 item.jd.com 与 miaosha.jd.com 如果域名和端口都相同,但是请求路径不同,不属于跨...

weixin_34163553的博客 1570

CORS Attack(Cross-origin Resource Sharing Attack) 跨域资源共享攻击

CORS攻击,详细梳理总结,全网少见,并有靶场配套练习。

一个安全白帽子的成长记录:Web 安全、漏洞复现、内网渗透。完整目录在 gysec.top 6435

跨域问题详解:CORS问题+解决办法

跨域问题详解:CORS问题+解决办法

weixin_45565886的博客 2万+

【浅读论文-红外和可见光图像融合-CNN】Infrared and Visible Image Fusion using a Deep Learning Framework

1.这篇是2018年ICPR会议上发表的一篇文章1。博主个人觉得这算比较早期在VIF(红外光和可见光图像融合)中加入了深度学习这一模型的论文。2.这篇文章并不是完全使用深度学习的模型,模型主体在图像分解和融合仍然采用传统的方法,只有其中一个分支在特征提取和重建方面用到了VGG网络。3.论文地址4.代码地址本文提出了基于深度学习框架的一种新算法。本文提出使用下述论文中Image fusion with guided filtering2中的分解方法将源图像分解为基本部分和细节内容。

一枚博鼠的博客 1708

基准电压 + 运放 + 低边MOS恒流源控制原理

因为恒流源强制 Iout不变,而 Vin​ 增加时,负载压降 Iout⋅Rload不变,多余的电压只能由MOS管的 VDS承担,因此 VDS必然增加。在饱和区,MOS 管的 ID 仅由 VGS决定,与 VDS 无关,这样,负载变化时,VDS可自由调整以维持 Iout恒定。当 Vin​ 小到无法满足 VDS>VGS−Vth时,MOS管进入线性区,Iout 会随 Vin​ 下降而减小,恒流失效。由于 Vref和 Rsense未变,Iout无需调整,运放无需动作,OUT保持不变,Iout恒定。

weixin_50643237的博客 2655

vue项目封装axios-封装请求-封装公共的api和调用请求

在做vue中大型项目的时候,官方推荐使用axios,但是原生的axios可能对项目的适配不友好,所以,在工程开始的来封装一下axios,保持全项目数据处理的统一性。此文主要讲在vue-cil项目中如何封装axios,封装请求,封装公共的api,页面如何调用请求。 如果你能看到这篇文章,鉴于有很多小白可能会参考我这篇文章来进行前期配置,特说明下正式配置路线: 拿到项目及后台接口,首先做的是配置全局代理及第二点; 全局封装axios及第三点request.js; 过滤axios请求方式,控制路径及参数

JackieDYH的博客 7259

WSL 相关命令时遇到了 “无法从raw.githubusercontent.com提取分发列表、操作超时

核心问题:国内网络屏蔽raw.githubusercontent.com,导致WSL无法获取发行版列表;最优方案:优先用方案1(手动指定发行版安装),无需改配置,1分钟搞定;永久修复:用方案2(修改hosts),适合需要管理多个WSL发行版的场景;兜底方案:用方案3(手动下载安装包),适配所有网络环境。按以上步骤操作后,你不仅能正常安装WSL,等命令也能正常执行,后续可正常使用WSL搭配Docker Desktop(如切换WSL 2后端),无需再担心网络超时问题。

weixin_39766667的博客 2139

VUE公共样式与公共方法

VUE公共样式与公共方法一、问题描述二、公共样式三、公共方法1、全局方法 一、问题描述 二、公共样式 三、公共方法 1、全局方法 防止按钮重复提交 参考:https://blog.youkuaiyun.com/qq_45516629/article/details/106422417?spm=1001.2014.3001.5506 (1)新建src/api/index.js文件 import Vue from 'vue' // 防止按钮重复点击 const preventReClick = Vue.directive(

前端入门 2064

EMQX 结合MySQL实现精细化ACL权限管理实战

本文详细介绍了如何通过EMQX结合MySQL实现精细化的ACL权限管理,提升物联网设备接入和消息传输的安全性。内容包括环境准备、基础配置、权限规则设计技巧以及高级应用与性能优化方案,帮助开发者快速掌握动态生效、便于管理的权限控制方法。

weixin_28683689的博客 197

10、犹豫双模糊TOPSIS算法:原理与实例解析

本文介绍了犹豫双模糊TOPSIS算法的基本原理与应用步骤,结合中国四家纺织公司的案例,详细解析了从构建犹豫双模糊决策矩阵、归一化处理、专家信息聚合,到确定正负理想解、计算距离与相对贴近度系数的完整决策流程。该方法有效应对决策者在评价过程中的犹豫性,适用于财务评估、项目选择等复杂多属性决策场景,具有较强的实用性和推广价值。

yhn45678901的博客 122

vue如何强行停止ajax请求,Vue怎么进行ajax请求公共方法

这次给大家带来Vue怎么进行ajax请求公共方法,Vue进行ajax请求公共方法的注意事项有哪些,下面就是实战案例,一起来看一下。为了减少代码的冗余,小编给大家推荐一篇介绍了决定抽离出请求ajax的公共方法的文章,供大家参考。我使用了ES6语法,编写了这个方法。/*** @param type 请求类型,分为POST/GET* @param url 请求url* @param contentTyp...

weixin_34593328的博客 680

AI漫剧全套万能提示词合集

今天给大家整理一套已经跑通爆款漫剧的万能提示词库!覆盖:豆包剧本人设词 + 分镜生成词 + 即梦绘图词 + 动态优化词 + 防翻车固定词直接复制粘贴,新手也能做出稳定、高清、统一、有质感的AI漫剧!你是资深短视频漫剧编剧,擅长制作60秒竖屏爆款AI漫剧,请为我创作一集完整漫剧内容。要求:开头3秒高能抓眼,中段有冲突转折,结尾留强悬念钩子,节奏紧凑、适合短视频流量。首先生成固定统一人物人设:包含脸型、五官、发色、发型、穿搭、身材、气质、画风、光影细节,要求足够精细,保证全程角色不变脸。

欢迎来到鸾姝淡月博客,专为程序员和编程爱好者打造的技术博客。我们分享编程语言趋势、开发工具、编程哲学、职业发展等,助你掌握新技术,优化技能,激发编程热情。 1898

vue.cli项目封装全局axios,请求封装,封装公共的api和调用请求

vue.cli项目封装全局axios,封装请求,封装公共的api和调用请求的全过程 正文 1.vue项目的前期配置 新建vue的项目,下载axios ,并且在main.js中导入axios npm i axios -S //main.js import axios from "axios" 2.配置config文件中的带地址 vuecli 3+ 新版本的代理配置 - vue.config.js文件 关于代理配置 devServer: { overlay: { // 让浏览器 o

weixin_47316914的博客 2408

【Bug已解决】Codex CLI 报 stream disconnected before completion 解决方案

方案适用场景推荐指数更新根证书库社区验证的最常见根因⭐⭐⭐⭐⭐检查系统时间虚拟机/容器等特殊运行环境⭐⭐⭐⭐核对 base_url 配置排除证书问题后的下一步排查⭐⭐⭐⭐更换网络环境测试怀疑本地网络设备存在干扰⭐⭐⭐升级到最新版本已知版本缺陷的场景⭐⭐⭐⭐报错虽然表现形式很像网络连接问题,但社区排查的多个真实案例表明,很大一部分情况的根因其实是本机系统的 TLS 证书信任链异常或系统时间不准确,而不是单纯的网络质量问题。优先检查并更新系统根证书库,这是社区验证过的高频根因。

一键难忘的博客 8021

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

vue中请求接口怎么封装公共地址_Vue项目封装请求数据的接口总结

以前的惯用做法都是直接在需要的页面写请求数据的接口。但是因为项目中会频繁的请求后台,所以将所有的请求封装起来,方便管理。一、配置url(可以放在一个js中)引入axios:import axios from “axios”配置urlconst service=axios.create({baseURL:请求的地址,timeout:5000 //访问超时的时间限制});抛出(如果是新起的js...

weixin_39673293的博客 1477

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

vue中请求接口怎么封装公共地址_vue请求接口的封装

import api from './api';import request from'./request';//获取url上的rest参数,返回参数列表 /{userId}/{roleId} => ['userId', 'roleId']functiongetUrlParams(url) {return (url.match(/\{(\w+)\}/g) || []).map(param =...

weixin_39549110的博客 762

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Vue抽离公共方法并全局注册使用

举例说明:抽离一个公共下载方法 创建两个页面的原因是确定全局方法在不同页面都可使用 别忘了在main.js引入router 三、封装axios请求 assets文件夹下新建api文件夹并在此文件下新建home.js 四、创建公共下载方法 在assets文件夹下新建utils文件夹并在此文件下新建downLoadTempFile.js......

Web_chicken的博客 3598

vue中请求接口怎么封装公共地址_vue项目封装api接口

1.当我们本机可以ping通xxx.xxx.xxx.xxx时,在地址栏输入http://xxx.xxx.xxx.xxx:8088/rcce/occu/list?pageNo=0&pageSize=5我们可以获得接口对应的数据,那么我们怎么样操作可以使得在地址栏中输入本机ip加上接口地址也能获得数据呢?答案是代理下面我们在项目中去使用axios调接口获得数据上面的操作我们可以看出,每个接口如...

weixin_39629969的博客 1277

vue.mixin()公共方法的混入

vue.mixin()公共方法 官网介绍:https://cn.vuejs.org/v2/guide/mixins.html 在vue项目中使用vue.mixin() //新建一个js文件,里边主要用来放一些公共的方法 export const InitMinxin = (vue) => { vue.mixin({ methods:{ //比如说我要写一个公共的axios请求数据的...

summer942zjb的博客 831

vue:定义公共方法

由于在项目中可能会出现需要调用同一个接口,那么如果每个需要调用这个方法的地方都重新写一个接口请求,显然这是一个不容易维护的行为,那么这个时候我们可以把频繁重复调用的方法提取出来,以后需要调用这个接口的时候直接引入这个接口就行了.1.创建公共方法文件 :common -> index.js文件就是我的公共方法了。有两种方法 第一种就是在需要这个方法的文件中,引入这个公共文件的idenx文件.3.已经把公共的方法挂载到Vue原型上了,接下来该怎么调用定义的公共方法了?

qq_45061461的博客 921

vue封装公共方法

vue封装公共方法

Skellig 885

vue中请求接口怎么封装公共地址_vue系列-封装http请求

功能支持RESful风格(get,post,delete,put,patch)支持处理格式化URL(/demo/{id})支持请求错误码跳转到指定url使用对外提供两个方法http(url = '', data = {}, method = "GET"):使用http请求getUrl(url = ''):构建完整的url代码import axios from 'axios';//创建axios实例...

weixin_39661589的博客 796
上一篇: promise.all&&race
下一篇: useMemo
炸鸡大叔
博客等级 码龄11年 90粉丝 50原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值