Vue使用axios添加請求頭方式

更新時間：2022年06月01日 11:59:10 作者：beihcengnans

這篇文章主要介紹了Vue使用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
})
// 設(shè)置 Vue.prototype.$http 為 axios 的別名：
Vue.prototype.$http=service

      this.$http({
        url: "url", 
        params: {
          bookNumber: this.booknum
        }
      })
        .then(res => {
        // 成功
        })
        .catch(err => {
        // 失敗
        });

axios添加自定義頭部出現(xiàn)的問題

在瀏覽器的http的 GET, POST的跨域請求中，添加自定義頭部，發(fā)送不是字符串，fromData的數(shù)據(jù)時，都是非簡單請求。

瀏覽器都預(yù)先發(fā)出OPTIONS（預(yù)檢安全請求）。

所以我們在axios中添加自定義頭部時候需要后端返回OPTIONS請求允許才進(jìn)行POST或GET請求。

后端中只需要對OPTIONS請求做出允許自定義頭部和狀態(tài)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();
? ? }

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue面試之new Vue的時候到底做了什么
這篇文章主要介紹了vue面試之new Vue的時候到底做了什么原理及vue加載流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
詳解基于vue-cli3快速發(fā)布一個fullpage組件
這篇文章主要介紹了詳解基于vue-cli3快速發(fā)布一個fullpage組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
vue實(shí)現(xiàn)動態(tài)給data函數(shù)中的屬性賦值
這篇文章主要介紹了vue實(shí)現(xiàn)動態(tài)給data函數(shù)中的屬性賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue開發(fā)高德地圖應(yīng)用的最佳實(shí)踐
要在Web頁面中加入地圖，我推薦你使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue開發(fā)高德地圖應(yīng)用的最佳實(shí)踐,需要的朋友可以參考下
2021-07-07
vue之keepAlive使用案例詳解
這篇文章主要介紹了vue之keepAlive使用案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
使用vue-router設(shè)置每個頁面的title方法
下面小編就為大家分享一篇使用vue-router設(shè)置每個頁面的title方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue實(shí)現(xiàn)倒計時功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)倒計時功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
Vue中的插槽Slot技術(shù)詳解
插槽(Slot)技術(shù)是一種用于組件化開發(fā)的重要技術(shù),允許我們在組件中定義一些占位符,在Vue中,插槽的使用方式可以分為三種：默認(rèn)插槽、具名插槽和作用域插槽,下面我們就來看看這三種方式的具體使用吧
2023-09-09
結(jié)合el-upload組件實(shí)現(xiàn)大文件分片上傳功能
Element UI的el-upload上傳組件相信各位小伙伴都已經(jīng)非常熟悉，最近接了一個新需求，要求在el-upload組件基礎(chǔ)上實(shí)現(xiàn)分片上傳功能，即小于等于5M文件正常上傳，大于5M文件切成5M每片上傳,那么這個功能怎么實(shí)現(xiàn)呢?一起看看吧
2022-09-09
解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁面,前面加默認(rèn)域名端口的問題
這篇文章主要介紹了解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁面,前面加默認(rèn)域名端口的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07