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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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