手牽手學習vue之如何封裝請求及處理跨域

2021-10-24 07:22:38 字數 1451 閱讀 3491

正常情況下,我們使用ajax請求的資料都在自己的伺服器上。但在一些特定的場景中,我們需要獲取到別人的伺服器上的資料,也就是在自己的伺服器中的ajax要請求到別人的伺服器的**,這就是跨域。跨域是瀏覽器為了安全而做出的策略:同源策略

即同埠,同網域名稱,同協議

簡述:vue-cli3.0發布後,專案配置檔案做出了重大革新,之前老的版本,專案配置項是在webpack中進行的,3.0後,官方給出了乙個可選的配置檔案vue.config.js,因此我們在處理前端跨域的時候也需要在這個檔案中進行,在這不過多闡述。詳細參考官方:vue cli

module.exports = }}

},}

其實如果一切順利,我們的跨域已經處理好~

import axios from 'axios'

import from 'element-ui'

import store from '@/store'

import from '@/utils/auth'

// 建立axios例項

const service = axios.create()

// request***

service.interceptors.request.use(

config =>

return config

},error =>

)// 響應***

service.interceptors.response.use(res =>

).then(() => )

})} else if (code !== 200) )

return promise.reject('error')

} else

}, error => )

return promise.reject(error)

})export default service

import service from "../../src/utils/request";

/*** 登入介面

*/ export function login(data) );

import  from "../../api/account";

onfinish = (values) => )

.catch((err) => );

console.log("received values of form: ", values);

};

手牽手學習react之如何使用redux(一)

外掛程式yarn add reduxindex.js import from redux import reducer from reducer const store createstore reducer export default store reducer.js const default...

vue學習之JS封裝

我是乙個菜鳥還需努力,一起都是自己觀點,不喜勿噴。匯入js檔案有很多種方式,我喜歡使用這種,感覺跟框架匯入很相似。沒有多餘的沉湎。定義乙個js檔案,比如util.js import vue from vue stringutil const stringutil if text.length tex...

如何用vue封裝axios詳解!

如何用vue封裝axios 該專案需要在登入之前新增驗證碼,為了更加方便請求介面的區分,可以封裝兩個請求介面,乙個登入之前需要請求的介面,乙個為登入之後請求的介面,使之互不干擾。1.登入前設定乙個資料夾axios,其中的index.js寫請求的介面,config.js寫配置 index.js 介面檔...