Axios常見配置選項(xiàng)跨域詳解

更新時(shí)間：2022年11月04日 11:19:03 作者：BruceWu_

axios基于http客戶端的promise，面向?yàn)g覽器和nodejs?axios?依賴原生的?ES6?Promise?實(shí)現(xiàn)而被支持，這篇文章主要介紹了axios常見配置選項(xiàng)?跨域,需要的朋友可以參考下

axios : 基于http客戶端的promise，面向?yàn)g覽器和nodejs axios 依賴原生的 ES6 Promise 實(shí)現(xiàn)而被支持.

安裝
1.使用npm: npm install axios
2.使用taobao源: cnpm install axios
3.使用bower: bower install axios
4.使用cdn： <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

常見配置選項(xiàng)

get => params
post => data

url（必寫）請(qǐng)求地址
method 請(qǐng)求方法，默認(rèn)是get
baseURL（常用）baseURL會(huì)添加到url前（url是絕對(duì)地址除外）。
transformRequest transformRequest選項(xiàng)允許我們?cè)谡?qǐng)求發(fā)送到服務(wù)器之前對(duì)請(qǐng)求的數(shù)據(jù)做出一些改動(dòng) , 該選項(xiàng)只適用于以下請(qǐng)求方式：put/post/patch
transformResponse transformResponse選項(xiàng)允許我們?cè)跀?shù)據(jù)傳送到then/catch方法之前對(duì)數(shù)據(jù)進(jìn)行改動(dòng)
headers（常用，如設(shè)置請(qǐng)求頭json類型）自定義請(qǐng)求頭信息
params（常用，只有g(shù)et請(qǐng)求設(shè)置params，其他請(qǐng)求需設(shè)置params,即只有g(shù)et的請(qǐng)求參數(shù)位于url后，其他請(qǐng)求參數(shù)都在請(qǐng)求體中）
params選項(xiàng)是要隨請(qǐng)求一起發(fā)送的請(qǐng)求參數(shù)----一般鏈接在URL后面
data（常用） data選項(xiàng)是作為一個(gè)請(qǐng)求體而需要被發(fā)送的數(shù)據(jù)，該選項(xiàng)只適用于方法：put/post/patch
在瀏覽器上data只能是FormData, File, Blob格式
timeout（常用）超時(shí)時(shí)間
withCredentials 選項(xiàng)表明了是否是跨域請(qǐng)求、默認(rèn)是default
onUploadProgress 上傳進(jìn)度事件
onDownloadProgress 下載進(jìn)度的事件
maxContentLength 相應(yīng)內(nèi)容的最大值

案例

axios({
    url:'/user',                            //  `url`是服務(wù)器鏈接，用來請(qǐng)求用
    method:`get`,                           //  `method`是發(fā)起請(qǐng)求時(shí)的請(qǐng)求方法
    baseURL:'http://some-domain.com/api/',  //  `baseURL`如果`url`不是絕對(duì)地址，那么將會(huì)加在其前面。當(dāng)axios使用相對(duì)地址時(shí)這個(gè)設(shè)置非常方便
 
    transformRequest:[function(data){       //  `transformRequest`允許請(qǐng)求的數(shù)據(jù)在傳到服務(wù)器之前進(jìn)行轉(zhuǎn)化。只適用于`PUT`,`GET`,`PATCH`方法。數(shù)組中的最后一個(gè)函數(shù)必須返回一個(gè)字符串，一個(gè)`ArrayBuffer`,或者`Stream`
        //依自己的需求對(duì)請(qǐng)求數(shù)據(jù)進(jìn)行處理
        return data;
    }],
    transformResponse:[function(data){      //  `transformResponse`允許返回的數(shù)據(jù)傳入then/catch之前進(jìn)行處理
        //依需要對(duì)數(shù)據(jù)進(jìn)行處理
        return data;
    }],  
    headers:{'X-Requested-with':'XMLHttpRequest'},//`headers`是自定義的要被發(fā)送的頭信息
    params:{ //`params`是請(qǐng)求連接中的請(qǐng)求參數(shù)，必須是一個(gè)純對(duì)象，或者URLSearchParams對(duì)象
        ID:12345
    },
    paramsSerializer: function(params){//`paramsSerializer`是一個(gè)可選的函數(shù)，是用來序列化參數(shù)，例如：（https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
        return Qs.stringify(params,{arrayFormat:'brackets'})
    },
    data:{//`data`是請(qǐng)求提需要設(shè)置的數(shù)據(jù)，只適用于應(yīng)用的'PUT','POST','PATCH'，請(qǐng)求方法。當(dāng)沒有設(shè)置`transformRequest`時(shí)，必須是以下其中之一的類型（不可重復(fù)？）：-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams。僅瀏覽器：FormData,File,Blob。僅Node：Stream
        firstName:'fred'
    },
    //`timeout`定義請(qǐng)求的時(shí)間，單位是毫秒。
    //如果請(qǐng)求的時(shí)間超過這個(gè)設(shè)定時(shí)間，請(qǐng)求將會(huì)停止。
    timeout:1000,
    //`withCredentials`表明是否跨域請(qǐng)求，
    //應(yīng)該是用證書
    withCredentials:false //默認(rèn)值
    //`adapter`適配器，允許自定義處理請(qǐng)求，這會(huì)使測(cè)試更簡(jiǎn)單。
    //返回一個(gè)promise，并且提供驗(yàn)證返回（查看[response docs](#response-api)）
    adapter:function(config){
        /*...*/
    },
    //`auth`表明HTTP基礎(chǔ)的認(rèn)證應(yīng)該被使用，并且提供證書。
    //這個(gè)會(huì)設(shè)置一個(gè)`authorization` 頭（header），并且覆蓋你在header設(shè)置的Authorization頭信息。
    auth:{
        username:'janedoe',
        password:'s00pers3cret'
    },
    //`responsetype`表明服務(wù)器返回的數(shù)據(jù)類型，這些類型的設(shè)置應(yīng)該是
    //'arraybuffer','blob','document','json','text',stream'
    responsetype:'json',
    //`xsrfHeaderName` 是http頭（header）的名字，并且該頭攜帶xsrf的值
    xrsfHeadername:'X-XSRF-TOKEN'，//默認(rèn)值
    //`onUploadProgress`允許處理上傳過程的事件
    onUploadProgress: function(progressEvent){
        //本地過程事件發(fā)生時(shí)想做的事
    },
    //`onDownloadProgress`允許處理下載過程的事件
    onDownloadProgress: function(progressEvent){
        //下載過程中想做的事
    },
    //`maxContentLength` 定義http返回內(nèi)容的最大容量
    maxContentLength: 2000,
    //`validateStatus` 定義promise的resolve和reject。
    //http返回狀態(tài)碼，如果`validateStatus`返回true（或者設(shè)置成null/undefined），promise將會(huì)接受；其他的promise將會(huì)拒絕。
    validateStatus: function(status){
        return status >= 200 &;&; stauts < 300;//默認(rèn)
    },
    //`httpAgent` 和 `httpsAgent`當(dāng)產(chǎn)生一個(gè)http或者h(yuǎn)ttps請(qǐng)求時(shí)分別定義一個(gè)自定義的代理，在nodejs中。
    //這個(gè)允許設(shè)置一些選選個(gè)，像是`keepAlive`--這個(gè)在默認(rèn)中是沒有開啟的。
    httpAgent: new http.Agent({keepAlive:treu}),
    httpsAgent: new https.Agent({keepAlive:true}),
    //`proxy`定義服務(wù)器的主機(jī)名字和端口號(hào)。
    //`auth`表明HTTP基本認(rèn)證應(yīng)該跟`proxy`相連接，并且提供證書。
    //這個(gè)將設(shè)置一個(gè)'Proxy-Authorization'頭(header)，覆蓋原先自定義的。
    proxy:{
        host:127.0.0.1,
        port:9000,
        auth:{
            username:'cdd',
            password:'123456'
        }
    },
    //`cancelTaken` 定義一個(gè)取消，能夠用來取消請(qǐng)求
    //（查看 下面的Cancellation 的詳細(xì)部分）
    cancelToke: new CancelToken(function(cancel){
    })
});

實(shí)際項(xiàng)目中的簡(jiǎn)化寫法

案例

//全局main.js中已引入axios, 設(shè)置baseURL,故寫this.axios ,this.axios({url:'xxx' ,medthod:get} ) medthod可以寫到前面去 ,全局中baseURL設(shè)置了基礎(chǔ)路徑, url中寫基礎(chǔ)路徑后面的請(qǐng)求部分即可  
   this.axios.get('login',{params:{uname:u,upwd:p}}).then(res=>{
              //8:接收服務(wù)器返回結(jié)果
              //9:如果-1  提示用戶名和密碼有誤
              //10:如果1  跳轉(zhuǎn)商品列表組件  /Product 
              if(res.data.code==-1){
                  this.$messagebox("消息","用戶名或密碼有誤");
              }else{
                  this.$toast("登錄成功");
                  this.$router.push("/Product");
              }
           })

并發(fā)請(qǐng)求

同一個(gè)url并發(fā)
baseURL全局axios

多個(gè)請(qǐng)求接口

不同url
create創(chuàng)建實(shí)例

實(shí)際項(xiàng)目生命周期中使用axios數(shù)據(jù)存入data()

實(shí)際開發(fā)import axios from ‘axios’ 放入全局引入main.js中
獲取到的數(shù)據(jù) 賦值存入data()中,賦值可以寫為空數(shù)組[] 數(shù)值0 空字符串 ’ ’ 形式在data(){}里

模塊封裝

對(duì)比上面每個(gè)組件都引入的axios ,以便于修改才需要實(shí)例模塊封裝
案例
回調(diào)函數(shù)的方法
src/network/request.js

promise的方法
src/network/request.js

也可以寫成

攔截器

vue中axios攔截器使用的圖文詳解

axios的post的請(qǐng)求頭Content-Type

axios的post的請(qǐng)求頭Content-Type默認(rèn)是 application/json;charset=UTF-8

axios.post(url, {}); // Content-Type: application/json;charset=UTF-8

如果把傳參改為字符串，請(qǐng)求頭的Content-Type會(huì)自動(dòng)變成application/x-www-form-urlencoded

axios.post(url, ''); // Content-Type: application/x-www-form-urlencoded

axios 全局配置

1.安裝:

npm install axios --save

2.配置文件

(1)在 src 文件夾中創(chuàng)建 api 文件夾,并創(chuàng)建文件 axios.js 和 index.

 ├── src                             
 │   ├── api                      
 ... ...  ├── axios.js  // 請(qǐng)求配置文件，axios的配置都在這里進(jìn)行
          └── index.js  // 接口函數(shù)封裝，方便外部調(diào)用接口

(2)axios.js文件: axios的配置都在這里進(jìn)行

/* 1.引入文件 */
import axios from 'axios'        //引入 axios庫
import qs from 'qs'              //引入 node中自帶的qs模塊（數(shù)據(jù)格式轉(zhuǎn)換）
 
/* 2.全局默認(rèn)配置 */
let baseURL
// 判斷開發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開發(fā)環(huán)境
    baseURL = '/api'    // 你設(shè)置的本地代理請(qǐng)求（跨域代理），下文會(huì)詳細(xì)介紹怎么進(jìn)行跨域代理
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測(cè)試環(huán)境
        baseURL = 'http://sw.apitest.com'
    } else {                                  // 正式環(huán)境
        baseURL = 'http://sw.api.com'
    }
}
// 配置axios的屬性
axios.defaults.timeout = 6000;    // 請(qǐng)求超時(shí)時(shí)間1分鐘                  
axios.defaults.baseURL =baseURL; // 你的接口地址 
axios.defaults.responseType="json";
axios.defaults.withCredentials=false;  是否允許帶cookie這些
.....
 
/*你也可以創(chuàng)建一個(gè)實(shí)例，然后在實(shí)例中配置相關(guān)屬性，此方法和上面的方法一樣，寫法不同，怎么用隨個(gè)人
*喜好，我比較喜歡用這種方法，如下：
*/
const Axios = axios.create({
	baseURL:baseURL , 		      // 后臺(tái)服務(wù)地址
	timeout: 60000, 		      // 請(qǐng)求超時(shí)時(shí)間1分鐘
	responseType: "json",
	withCredentials: false    // 是否允許帶cookie這些
});


 
/* 3.設(shè)置攔截器 */  
/*如果不是用創(chuàng)建實(shí)例的方式配置，那么下面的Axios都要換成axios,也就是文件開頭你用import引入axios
時(shí)定義的變量*/
Axios .interceptors.request.use((config) => {
    發(fā)送請(qǐng)求前進(jìn)行攔截
    //  可在此處配置請(qǐng)求頭信息
	config.headers["appkey"] ="...";
	config.headers["token"] ="...";
           ...
 	if (config.method == "post") {
  /*數(shù)據(jù)轉(zhuǎn)換: axios post方式默認(rèn)是json格式提交數(shù)據(jù)，如果使用application/x-www-form-urlencoded數(shù)據(jù)格式提交，要用qs.stringify()進(jìn)行轉(zhuǎn)換,個(gè)人建議不在攔截器中全局配置，因?yàn)椴粔蜢`活，還有一點(diǎn)是，如果
設(shè)置了重新請(qǐng)求的配置，那么重新請(qǐng)求時(shí)，請(qǐng)求體中的config里面的傳參就會(huì)被再次進(jìn)行qs.stringify()轉(zhuǎn)
換，會(huì)使得參數(shù)丟失，造成請(qǐng)求失敗。*/
 		config.data = qs.stringify(config.data)
 	}
	return config;
  },(error) =>{
    //console.log("錯(cuò)誤的傳參", 'fail');
    return Promise.reject(error)
  })
Axios .interceptors.response.use((res) =>{
   請(qǐng)求響應(yīng)后攔截
   if(res.status == 200){                       // 對(duì)響應(yīng)數(shù)據(jù)做些事
       //alert("提交成功")
       return Promise.resolve(res)
    }
    return res;
 }, (error) => {
    
   //alert("網(wǎng)絡(luò)異常!") 404等問題可以在這里處理
   return Promise.reject(error)
 })
export default Axios

接口函數(shù)的封裝配置

(3)index.js文件接口函數(shù)的封裝在這里配置，下面以三個(gè)請(qǐng)求接口不同的請(qǐng)求方式和數(shù)據(jù)格式為例。來進(jìn)行封裝示范：

import Axios from "./axios"  // 導(dǎo)入配置好的axios文件
// 封裝axios請(qǐng)求函數(shù)，并用export導(dǎo)出
export function getItemList(datas) {
    return Axios({
	url: "/api/getItemList",
	method: "post",
	headers: {
	    'Content-Type': 'application/x-www-form-urlencoded' //設(shè)置請(qǐng)求頭請(qǐng)求格式form
	},
	data: datas
    })
}
export function getItem(datas) {
    return Axios({
	url: "/api/getItem",
	method: "post",
	headers: {
	    'Content-Type': 'application/json' //設(shè)置請(qǐng)求頭請(qǐng)求格式為json
	},
	data: datas
    })
}
export function getItemInfo(datas) {
    return Axios({
	url: "/api/getItemInfo"+datas,
        method: "get",
    })
}

3.在組件中使用上面封裝好的三個(gè)接口函數(shù)

<template>
  <div class="home">
 
  </div>
</template>
<script>
import qs from 'qs' //引入 node中自帶的qs模塊（對(duì)application/x-www-form-urlencoded數(shù)據(jù)格式轉(zhuǎn)換）
import { getItemList,getItemInfo } from '@/api'  // 導(dǎo)入 封裝的請(qǐng)求函數(shù)
export default {
  name: 'HelloWorld',
  data () {
    return {
        getItemListData:{},// getItemList  接口入?yún)?
        getItemInfoData:{  // getItemInfo  接口入?yún)?
            page:1,
            size:10
        }, 
    }
  },
  created(){
    getItemList(qs.stringify(this.getItemListData)).then(res=>{
        //這個(gè)接口數(shù)據(jù)是application/x-www-form-urlencoded，所以參數(shù)要進(jìn)行qs轉(zhuǎn)化
        // 請(qǐng)求返回?cái)?shù)據(jù)
    }).catch(err=>{
        // 請(qǐng)求失敗執(zhí)行
    })
    getItem(this.getItemListData).then(res=>{
        // 請(qǐng)求返回?cái)?shù)據(jù)
    }).catch(err=>{
        // 請(qǐng)求失敗執(zhí)行
    })
    getItemInfo(`?page=${this.getItemInfoData.page}&size=${this.getItemInfoData.size}`).then(res=>{
        // get請(qǐng)求，url傳值。用的是字符串模板傳值
        // 請(qǐng)求返回?cái)?shù)據(jù)
    }).catch(err=>{
        // 請(qǐng)求失敗執(zhí)行
    })
  }
}
</script>

設(shè)置代理解決請(qǐng)求跨域

4.設(shè)置代理解決請(qǐng)求跨域(如果需要的話) config/index.js
前后端分離開發(fā)時(shí)會(huì)遇到跨域問題,可通過以下配置使用服務(wù)器代理解決跨域.
項(xiàng)目打包上線時(shí)不存在跨域,可在配置文件中做環(huán)境判斷。上面的配置文件axios.js文件中已經(jīng)做了環(huán)境判斷，所以無需更改。

/*---------------------------(1) 打開config/index.js-------------------------------------------*/
//將文件中的該項(xiàng)配置  proxyTable:{} 修改成如下配置
proxyTable: {
  '/aaa': { // 這個(gè)aaa 要與 axios.js 文件中的 baseURL 值對(duì)應(yīng)
    target: 'http://sw.api.com',      // 你接口的域名
    changeOrigin: true,
    pathRewrite:{
        '^/aaa':''
    }
  }        
}
 
/*---------------------------(2) api/axios.js 文件的基路徑配置,開發(fā)環(huán)境中的baseURL -------------------------------*/
let baseURL
// 判斷開發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開發(fā)環(huán)境
    baseURL = '/aaa'    // 對(duì)應(yīng)上面的代理名 aaa 
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測(cè)試環(huán)境
        baseURL = 'http://sw.apitest.com'
    } else {                                  // 正式環(huán)境
        baseURL = 'http://sw.api.com'
    }
}

5.多個(gè)域名接口代理設(shè)置 config/index.js

有時(shí)候一個(gè)項(xiàng)目，往往涉及多個(gè)服務(wù)器的接口，域名不一樣，所以要進(jìn)行多個(gè)代理設(shè)置，代理的設(shè)置和第四步一樣，那么此時(shí)在 api 文件夾中就要配置兩份（如下），兩份文件的配置基本一模一樣，唯一的區(qū)別在于各自的 baseUrl 不同，因?yàn)樗麄兊慕涌谟蛎灰粯樱?/p>

 ├── src                             
 │   ├── api                      
 ... ...  ├── axios.js
          └── index.js
          ├── axios1.js
          └── index1.js

注：為了api文件夾的簡(jiǎn)潔以及接口管理方便，對(duì)于多域名代理的，建議將對(duì)應(yīng)的axios.js 和 index.js 兩個(gè)js文件合并成一個(gè)js文件，怎么合并就不講了，懂js的都會(huì),不會(huì)的就反思一下，補(bǔ)充下基礎(chǔ)知識(shí)。

config/index.js 中設(shè)置多個(gè)代理，如下：

/*---------------------------打開config/index.js-------------------------------------------*/
//將文件中的該項(xiàng)配置  proxyTable:{} 修改成如下配置
proxyTable: {
  // 第一個(gè)后臺(tái)接口域名代理
  '/aaa': { // 這個(gè)aaa 要與 axios.js 文件中的 baseURL 值對(duì)應(yīng)
    target: 'http://sw.api.com',      // 你第一個(gè)接口的域名
    changeOrigin: true,
    pathRewrite:{
        '^/aaa':''
    }
  },
   // 第二個(gè)后臺(tái)接口域名代理
  '/bbb': { // 這個(gè)bbb要與 axios1.js 文件中的 baseURL 值對(duì)應(yīng)
    target: 'http://sg.api.com',      // 你第二個(gè)接口的域名
    changeOrigin: true,
    pathRewrite:{
        '^/aaa':''
    }
  },      
}
/*---------------------------(1) api/axios.js 文件的基路徑配置,開發(fā)環(huán)境中的baseURL ----------------------------*/
let baseURL
// 判斷開發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開發(fā)環(huán)境
    baseURL = '/aaa'    // 對(duì)應(yīng)上面的第一個(gè)代理名 aaa 
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測(cè)試環(huán)境
        baseURL = 'http://sw.apitest.com'
    } else {                                  // 正式環(huán)境
        baseURL = 'http://sw.api.com'
    }
}
 
/*---------------------------(2) api/axios1.js 文件的基路徑配置,開發(fā)環(huán)境中的baseURL ----------------------------*/
let baseURL
// 判斷開發(fā)環(huán)境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 開發(fā)環(huán)境
    baseURL = '/bbb'    // 對(duì)應(yīng)上面的第二個(gè)代理名 bbb
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測(cè)試環(huán)境
        baseURL = 'http://sg.apitest.com'
    } else {                                  // 正式環(huán)境
        baseURL = 'http://sg.api.com'
    }