import axios from 'axios'
const service = axios.create({
  baseURL: process.env.VUE_APP_API, // 請(qǐng)求的接口
  timeout: 100000 // 請(qǐng)求超時(shí)時(shí)間
})
 
// 使用攔截器，定義全局請(qǐng)求頭
service.interceptors.request.use(config => {
  // 在請(qǐng)求頭中添加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的跨域請(qǐng)求中，添加自定義頭部，發(fā)送不是字符串，fromData的數(shù)據(jù)時(shí)，都是非簡(jiǎn)單請(qǐng)求。

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

所以我們?cè)赼xios中添加自定義頭部時(shí)候需要后端返回OPTIONS請(qǐng)求允許才進(jìn)行POST或GET請(qǐng)求。

后端中只需要對(duì)OPTIONS請(qǐng)求做出允許自定義頭部和狀態(tài)200即可。

if(req.method==='OPTIONS'){
? ? ? ? res.writeHead(200,{
? ? ? ? ? ? //允許跨域
? ? ? ? ? ? "Access-Control-Allow-Origin":"*",
? ? ? ? ? ? "Access-Control-Allow-Credentials":"true",
? ? ? ? ? ? //允許請(qǐng)求類型
? ? ? ? ? ? "Access-Control-Allow-Methods":"*",
? ? ? ? ? ? //允許自定義頭部
? ? ? ? ? ? 'Access-Control-Allow-Headers':"*",
? ? ? ? ? ? 'Access-Control-Expose-Headers':'*'
? ? ? ? })
? ? ? ? res.end();
? ? }

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

您可能感興趣的文章:

相關(guān)文章

vue.js element-ui validate中代碼不執(zhí)行問題解決方法
這篇文章主要介紹了vue.js element-ui validate中代碼不執(zhí)行問題解決方法,需要的朋友可以參考下
2017-12-12
詳解mpvue中小程序自定義導(dǎo)航組件開發(fā)指南
這篇筆記主要記錄一下基于mpvue的小程序中實(shí)現(xiàn)自定義導(dǎo)航的思路及應(yīng)用。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
vue下canvas裁剪圖片實(shí)例講解
在本篇文章里小編給大家整理了關(guān)于vue下canvas裁剪圖片實(shí)例講解內(nèi)容，需要的朋友們可以參考下。
2020-04-04
Vue使用Prism實(shí)現(xiàn)頁(yè)面代碼高亮展示示例
這篇文章主要為大家介紹了Vue使用Prism實(shí)現(xiàn)頁(yè)面代碼高亮展示示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
element UI 中的 el-tree 實(shí)現(xiàn) checkbox&n
在日常項(xiàng)目開發(fā)中，會(huì)經(jīng)常遇到，樹形結(jié)構(gòu)的查詢方式，為了快速方便開發(fā)，常常會(huì)使用到快捷的ui組件去快速搭樹形結(jié)構(gòu)，這里我用的是 element ui 中的 el-tree，對(duì)element UI 中的 el-tree 實(shí)現(xiàn) checkbox 單選框及 bus 傳遞參數(shù)的方法感興趣的朋友跟隨小編一起看看吧
2022-09-09
Vue實(shí)現(xiàn)漸變色進(jìn)度條的代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)漸變色進(jìn)度條的代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
解決Element ui導(dǎo)航欄選中背景色刷新消失的問題
這篇文章主要介紹了解決Element ui導(dǎo)航欄選中背景色刷新消失的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
基于vue開發(fā)的在線付費(fèi)課程應(yīng)用過程
這篇文章主要介紹了基于vue開發(fā)的在線付費(fèi)課程應(yīng)用過程，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-01-01
Vue.js實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法
這篇文章主要介紹了Vue.js實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-08-08
Vue項(xiàng)目中封裝axios的方法
這篇文章主要介紹了Vue項(xiàng)目中封裝axios的方法,axios 是一個(gè)輕量的 HTTP客戶端，基于 XMLHttpRequest 服務(wù)來執(zhí)行 HTTP 請(qǐng)求，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05