vue axios每次都重複請求兩次

2021-10-08 09:43:52 字數 600 閱讀 6922

axios傳送兩次請求原因及解決方法

瀏覽器將cors請求分成兩類:簡單請求(****** request)和非簡單請求(not-so-****** request)。

凡是不同時滿足上面兩個條件,就屬於非簡單請求。

非簡單請求的cors請求,會在正式通訊之前,增加一次http查詢請求,稱為"預檢"請求(preflight)。

瀏覽器先詢問伺服器,當前網頁所在的網域名稱是否在伺服器的許可名單之中,以及可以使用哪些http動詞和頭資訊字段。只有得到肯定答覆,瀏覽器才會發出正式的xmlhttprequest請求,否則就報錯。

兩次請求原因

前後端未滿足「同源策略/sop」,俗稱請求跨域。瀏覽器一旦發現請求跨域,就會使用cors通訊,自動新增一些附加的頭資訊,簡單請求只會有一次請求,只有非簡單請求會附加一次請求。

解決方法

服務期端直接通過「預檢」請求,伺服器新建***,攔截所有請求,篩選所有requset method:options的請求,不做任何處理直接返回即可。(後端處理)

參考:

vue axios 請求封裝

import axios from axios import router from router index import from element ui import from utils loading import from utils auth import qs from qs 引入qs...

封裝vue axios請求

util.js import axios from axios import qs from qs import from vant h5用的這個 const apiurl xx 訪問介面位址 設定超時時間 請求頭等 axios.defaults.timeout 30000 axios.defaul...

vue axios請求封裝

在src檔案下自定義乙個api.js import axios from axios 建立乙個axios物件 const 建立乙個唯讀檔案 const instance axios.create 請求攔截 所有的網路請求都會先走這個方法 instance.interceptors.request.u...