Axios常見配置選項跨域詳解

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

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

axios : 基于http客戶端的promise，面向瀏覽器和nodejs axios 依賴原生的 ES6 Promise 實現(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>

常見配置選項

get => params
post => data

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

案例

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

實際項目中的簡化寫法

案例

//全局main.js中已引入axios, 設(shè)置baseURL,故寫this.axios ,this.axios({url:'xxx' ,medthod:get} ) medthod可以寫到前面去 ,全局中baseURL設(shè)置了基礎(chǔ)路徑, url中寫基礎(chǔ)路徑后面的請求部分即可  
   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ā)請求

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

多個請求接口

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

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

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

模塊封裝

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

promise的方法
src/network/request.js

也可以寫成

攔截器

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

axios的post的請求頭Content-Type

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

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

如果把傳參改為字符串，請求頭的Content-Type會自動變成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  // 請求配置文件，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è)置的本地代理請求（跨域代理），下文會詳細(xì)介紹怎么進(jìn)行跨域代理
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測試環(huán)境
        baseURL = 'http://sw.apitest.com'
    } else {                                  // 正式環(huán)境
        baseURL = 'http://sw.api.com'
    }
}
// 配置axios的屬性
axios.defaults.timeout = 6000;    // 請求超時時間1分鐘                  
axios.defaults.baseURL =baseURL; // 你的接口地址 
axios.defaults.responseType="json";
axios.defaults.withCredentials=false;  是否允許帶cookie這些
.....
 
/*你也可以創(chuàng)建一個實例，然后在實例中配置相關(guān)屬性，此方法和上面的方法一樣，寫法不同，怎么用隨個人
*喜好，我比較喜歡用這種方法，如下：
*/
const Axios = axios.create({
	baseURL:baseURL , 		      // 后臺服務(wù)地址
	timeout: 60000, 		      // 請求超時時間1分鐘
	responseType: "json",
	withCredentials: false    // 是否允許帶cookie這些
});


 
/* 3.設(shè)置攔截器 */  
/*如果不是用創(chuàng)建實例的方式配置，那么下面的Axios都要換成axios,也就是文件開頭你用import引入axios
時定義的變量*/
Axios .interceptors.request.use((config) => {
    發(fā)送請求前進(jìn)行攔截
    //  可在此處配置請求頭信息
	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)換,個人建議不在攔截器中全局配置，因為不夠靈活，還有一點是，如果
設(shè)置了重新請求的配置，那么重新請求時，請求體中的config里面的傳參就會被再次進(jìn)行qs.stringify()轉(zhuǎn)
換，會使得參數(shù)丟失，造成請求失敗。*/
 		config.data = qs.stringify(config.data)
 	}
	return config;
  },(error) =>{
    //console.log("錯誤的傳參", 'fail');
    return Promise.reject(error)
  })
Axios .interceptors.response.use((res) =>{
   請求響應(yīng)后攔截
   if(res.status == 200){                       // 對響應(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ù)的封裝在這里配置，下面以三個請求接口不同的請求方式和數(shù)據(jù)格式為例。來進(jìn)行封裝示范：

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

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

<template>
  <div class="home">
 
  </div>
</template>
<script>
import qs from 'qs' //引入 node中自帶的qs模塊（對application/x-www-form-urlencoded數(shù)據(jù)格式轉(zhuǎn)換）
import { getItemList,getItemInfo } from '@/api'  // 導(dǎo)入 封裝的請求函數(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=>{
        //這個接口數(shù)據(jù)是application/x-www-form-urlencoded，所以參數(shù)要進(jìn)行qs轉(zhuǎn)化
        // 請求返回數(shù)據(jù)
    }).catch(err=>{
        // 請求失敗執(zhí)行
    })
    getItem(this.getItemListData).then(res=>{
        // 請求返回數(shù)據(jù)
    }).catch(err=>{
        // 請求失敗執(zhí)行
    })
    getItemInfo(`?page=${this.getItemInfoData.page}&size=${this.getItemInfoData.size}`).then(res=>{
        // get請求，url傳值。用的是字符串模板傳值
        // 請求返回數(shù)據(jù)
    }).catch(err=>{
        // 請求失敗執(zhí)行
    })
  }
}
</script>

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

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

/*---------------------------(1) 打開config/index.js-------------------------------------------*/
//將文件中的該項配置  proxyTable:{} 修改成如下配置
proxyTable: {
  '/aaa': { // 這個aaa 要與 axios.js 文件中的 baseURL 值對應(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'    // 對應(yīng)上面的代理名 aaa 
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測試環(huán)境
        baseURL = 'http://sw.apitest.com'
    } else {                                  // 正式環(huán)境
        baseURL = 'http://sw.api.com'
    }
}

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

有時候一個項目，往往涉及多個服務(wù)器的接口，域名不一樣，所以要進(jìn)行多個代理設(shè)置，代理的設(shè)置和第四步一樣，那么此時在 api 文件夾中就要配置兩份（如下），兩份文件的配置基本一模一樣，唯一的區(qū)別在于各自的 baseUrl 不同，因為他們的接口域名不一樣，

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

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

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

/*---------------------------打開config/index.js-------------------------------------------*/
//將文件中的該項配置  proxyTable:{} 修改成如下配置
proxyTable: {
  // 第一個后臺接口域名代理
  '/aaa': { // 這個aaa 要與 axios.js 文件中的 baseURL 值對應(yīng)
    target: 'http://sw.api.com',      // 你第一個接口的域名
    changeOrigin: true,
    pathRewrite:{
        '^/aaa':''
    }
  },
   // 第二個后臺接口域名代理
  '/bbb': { // 這個bbb要與 axios1.js 文件中的 baseURL 值對應(yīng)
    target: 'http://sg.api.com',      // 你第二個接口的域名
    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'    // 對應(yīng)上面的第一個代理名 aaa 
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測試環(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'    // 對應(yīng)上面的第二個代理名 bbb
} else {                                      // 編譯環(huán)境
    if (process.env.type === 'test') {        // 測試環(huán)境
        baseURL = 'http://sg.apitest.com'
    } else {                                  // 正式環(huán)境
        baseURL = 'http://sg.api.com'
    }