广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue使用axios添加请求头方式
  • 309
分享到

Vue使用axios添加请求头方式

2024-04-02 19:04:59 309人浏览 泡泡鱼
摘要

目录使用axiOS添加请求头axios添加自定义头部出现的问题使用axios添加请求头 import axios from 'axios' const service = axios

使用axios添加请求头

import axios from 'axios'
const service = axios.create({
  baseURL: process.env.Vue_APP_api, // 请求的接口
  timeout: 100000 // 请求超时时间
})
 
// 使用拦截器,定义全局请求头
service.interceptors.request.use(config => {
  // 在请求头中添加token
  config.headers.Authorization = window.localStorage.getItem("user")
  return config
})
// 设置 Vue.prototype.$Http 为 axios 的别名:
Vue.prototype.$http=service
      this.$http({
        url: "url", 
        params: {
          bookNumber: this.booknum
        }
      })
        .then(res => {
        // 成功
        })
        .catch(err => {
        // 失败
        });

axios添加自定义头部出现的问题

在浏览器的http的 GET, POST的跨域请求中,添加自定义头部,发送不是字符串,fromData的数据时,都是非简单请求。

浏览器都预先发出OPTIONS(预检安全请求)。

所以我们在axios中添加自定义头部时候需要后端返回OPTIONS请求允许才进行POST或GET请求。

后端中只需要对OPTIONS请求做出允许自定义头部和状态200即可。

if(req.method==='OPTIONS'){
        res.writeHead(200,{
            //允许跨域
            "Access-Control-Allow-Origin":"*",
            "Access-Control-Allow-Credentials":"true",
            //允许请求类型
            "Access-Control-Allow-Methods":"*",
            //允许自定义头部
            'Access-Control-Allow-Headers':"*",
            'Access-Control-Expose-Headers':'*'
        })
        res.end();
    }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue使用axios添加请求头方式

本文链接: https://www.lsjlt.com/news/150359.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue使用axios添加请求头方式
    目录使用axios添加请求头axios添加自定义头部出现的问题使用axios添加请求头 import axios from 'axios' const service = axios...
    99+
    2022-11-13
  • Vue如何使用axios添加请求头
    这篇“Vue如何使用axios添加请求头”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue如何使用axios添加请求头”文...
    99+
    2023-06-30
  • axios添加请求头
    axios添加请求头 在前端开发中,我们经常需要使用ajax来发送HTTP请求。而axios是一个流行的基于Promise的HTTP客户端库,它可以轻松地与浏览器和Node.js中的HTTP API进行集成。在使用axios发送请求时,有时...
    99+
    2023-12-23
    1024程序员节
  • vue axios中的get请求方式
    目录vue axios中的get请求一、安装二、使用常见错误vue axios post请求参数错误400vue axios中的get请求 一、安装 使用 npm:npm insta...
    99+
    2022-11-13
  • VUE axios每次请求添加时间戳问题
    目录VUE axios每次请求添加时间戳axios封装加时间戳或者随机数总结VUE axios每次请求添加时间戳 service.interceptors.request.use( ...
    99+
    2023-01-28
    VUE axios请求 VUE时间戳 axios请求添加时间戳
  • 使用Feign调用时添加验证信息token到请求头方式
    目录Feign调用添加验证信息token到请求头1、这是最简单的一个方法2、这个方法是网上大多数人的用法3、第三种方法就是大神的方法了Feign中增加请求头最近遇到项目在调用Feig...
    99+
    2022-11-13
  • vue axios中的get请求方式是什么
    这篇文章主要讲解了“vue axios中的get请求方式是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue axios中的get请求方式是什么”吧!vue axi...
    99+
    2023-07-02
  • vue项目中如何使用axios发送请求让ajax请求头部携带cookie
    这篇文章主要为大家展示了“vue项目中如何使用axios发送请求让ajax请求头部携带cookie”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue项目中如何...
    99+
    2022-10-19
  • Vue用Axios异步请求API的方法
    这篇文章主要介绍“Vue用Axios异步请求API的方法”,在日常操作中,相信很多人在Vue用Axios异步请求API的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vu...
    99+
    2022-10-19
  • Vue怎么使用axios发送请求
    本文小编为大家详细介绍“Vue怎么使用axios发送请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么使用axios发送请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。例:当我们在APP组件的子组件...
    99+
    2023-07-05
  • SpringCloudFeign请求添加headers的实现方式
    目录背景方案一方案二方案三方案四方案五总结背景 部门技术升级,HttpClient需要升级Feign调用,重构某一个资方时遇到请求需要添加上自定义签名headers,踩坑后记录了下来...
    99+
    2023-05-18
    Spring Cloud Feign请求 Feign请求添加headers Spring Cloud Feign
  • Vue + Axios 请求接口方法与传参方式详解
    目录一、Get请求:二、Post请求:三、拓展补充使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传...
    99+
    2022-11-12
  • 使用md5在vue中的axios请求时加密API问题
    目录md5在vue中的axios请求时加密API1.安装axios2.安装MD53.在vue项目中得main.js中全局引入4.在main.js中加入以下代码5.在组件中运用axio...
    99+
    2023-01-28
    使用md5 vue axios请求 axios请求加密API
  • vue axios数据请求及vue中使用axios的示例分析
    这篇文章将为大家详细讲解有关vue axios数据请求及vue中使用axios的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。axios 简介axios 是一个基...
    99+
    2022-10-19
  • vue怎么使用axios发送ajax请求
    在vue中使用axios发送ajax请求的方法:1.新建vue.js项目;2.使用npm命令下载axios;3.使用import方法导入axios;4.执行代码发送ajax请求;具体步骤如下:首先,在vue-cli中创建一个vue.js项目...
    99+
    2022-10-10
  • Vue+Axios请求接口方法与传参方式是什么
    这篇文章主要讲解了“Vue+Axios请求接口方法与传参方式是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue+Axios请求接口方法与传参方式是什么”吧!一、Get请求:Get请求...
    99+
    2023-06-22
  • vue中如何使用axios数据请求get、post方法
    小编给大家分享一下vue中如何使用axios数据请求get、post方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!vue中使用axios方法我们先安装axios这个方法npm inst...
    99+
    2022-10-19
  • Vue中怎么使用axios发送post请求
    Vue中怎么使用axios发送post请求,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。vue-resource不再维护之后,我也用起了a...
    99+
    2022-10-19
  • 如何在Vue项目中使用axios请求
    目录1、安装2、没有封装存在的问题3、创建文件4、请求地址配置5、axios 配置,设置请求头及响应码处理6、使用在实际的项目中,和后台的数据交互是少不了的,我通常使用的是 axio...
    99+
    2022-11-12
  • vue中使用axios固定url请求前缀
    目录使用axios固定url请求前缀定义axios默认路径前缀或动态修改前缀总结使用axios固定url请求前缀 main.js中添加: 使用方法: 定义axios默认路径前缀...
    99+
    2022-12-09
    vue使用axios vue url请求前缀 axios固定url请求前缀
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作