使用Vue的axios自定義header時(shí)報(bào)錯(cuò)處理~

ysl_unh 發(fā)布于2019-08-21 17:49 / 1128人閱讀

前端Axios的設(shè)置處理
當(dāng) Content-Type 為 application/json 的時(shí)候，會(huì)先產(chǎn)生一個(gè) OPTION 請(qǐng)求（如 Network所示）。

可以把 Content-Type 設(shè)置為 application/x-www-form-urlencoded。
設(shè)置 Auth 請(qǐng)求頭，參看官方文檔

axios.defaults.baseURL = "https://api.example.com";
axios.defaults.headers.common["Authorization"] = AUTH_TOKEN;
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

舉個(gè)栗子~
// 新創(chuàng)建 axios 實(shí)例配置
const $axios = axios.create({
    baseURL: "http://domain.com",
    timeout: 5000,
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "sessionId":  Lockr.get("sessionId"),
        "authKey": Lockr.get("authKey"),
    }
});

// 初始化默認(rèn)post header
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

前端設(shè)置成功后可能會(huì)遇到以下問題cross 帶option的請(qǐng)求不被服務(wù)端所允許，所以就需要后臺(tái)來處理，可能遇到的問題和處理的方法如下：

這個(gè)報(bào)錯(cuò)后的解決辦法是后端配置以下東西~

    HttpServletRequest request = (HttpServletRequest) req;
            HttpServletResponse response = (HttpServletResponse) res;
            String origin = request.getHeader("Origin");
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "x-requested-with,token");
            response.setHeader("Access-Control-Allow-Credentials", "true"); //是否支持cookie跨域
            chain.doFilter(req, res);
            
            response.setHeader("Access-Control-Allow-Headers", "x-

重點(diǎn)在這里
requested-with,token");這個(gè)是配置自定義header內(nèi)的token appid之類的~~
如果有疑問請(qǐng)?jiān)谙路竭M(jìn)行提問，有時(shí)間必作答

GPU云服務(wù)器云服務(wù)器 cdn自定義header 自定義鏡像的使用 tomcat啟動(dòng)時(shí)報(bào)錯(cuò) php自定義異常處理

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90053.html

相關(guān)文章

Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)

摘要：也就是說我們手動(dòng)在原型身上掛載無(wú)法識(shí)別到。這樣就完美避免了報(bào)錯(cuò)的問題。說明使用進(jìn)行開發(fā)的過程中，會(huì)遇到各種各樣的報(bào)錯(cuò)問題，希望記錄下來，避免下次再次踩坑，也希望幫助其他人。 Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò) 在vue項(xiàng)目開發(fā)過程中，為了方便在各個(gè)組件中調(diào)用axios，我們通常會(huì)在入口文件將axios掛載到vue原型身上，如下：main.ts import...

AaronYuan 2019-08-26 10:37 評(píng)論0 收藏0
vue項(xiàng)目中使用element-ui下拉框選項(xiàng)值為對(duì)象時(shí)報(bào)錯(cuò)

摘要：在做后臺(tái)管理時(shí)，使用了搭配，請(qǐng)求方法使用了插件，在使用下拉框時(shí)，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對(duì)象。在做后臺(tái)管理時(shí)，使用了vue搭配elementUI，請(qǐng)求方法使用了axios插件，在使用下拉框時(shí)，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對(duì)象。對(duì)select下拉框的文檔沒有讀的很仔細(xì)，百度過幾篇文章，也沒有理解他們表達(dá)的意思，然后自己又去看文檔，把他的屬性看...

Drummor 2019-08-26 10:57 評(píng)論0 收藏0
貓頭鷹的深夜翻譯：從1000+JS項(xiàng)目中匯總的10個(gè)最容易出現(xiàn)的錯(cuò)誤(以及如何解決)

摘要：常出現(xiàn)的錯(cuò)誤前十位為了可讀性，錯(cuò)誤名稱進(jìn)行了一定的簡(jiǎn)寫。讓我們深入了解每個(gè)錯(cuò)誤發(fā)生的原因以及解決方法。這個(gè)問題很容易解決。當(dāng)未捕獲的錯(cuò)誤跨越違法跨域策略的域邊界時(shí)，會(huì)發(fā)生腳本錯(cuò)誤。這是當(dāng)你在中試圖調(diào)用的方法時(shí)出現(xiàn)的錯(cuò)誤。 JavaScript常出現(xiàn)的錯(cuò)誤前十位 showImg(https://segmentfault.com/img/bV3Z1z?w=1116&h=691); 為了可讀...

eccozhou 2019-08-26 11:46 評(píng)論0 收藏0
vue開發(fā)項(xiàng)目完全指南

摘要：有兩種方法，一種是在開發(fā)環(huán)境中設(shè)置通過的，另一種是在服務(wù)器上修改的配置設(shè)置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動(dòng)去除統(tǒng)一管理在項(xiàng)目開發(fā)過程中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要統(tǒng)一管理接口。這篇文章總結(jié)了vue項(xiàng)目的所遇到的問題，包括跨域、用戶認(rèn)證、接口統(tǒng)一管理、路由配置、兼容性處理，性能優(yōu)化等內(nèi)容。項(xiàng)目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 評(píng)論0 收藏0
后端開發(fā)者的Vue學(xué)習(xí)之路（五）

摘要：由服務(wù)器提供的響應(yīng)來自服務(wù)器響應(yīng)的狀態(tài)碼來自服務(wù)器響應(yīng)的狀態(tài)信息服務(wù)器響應(yīng)的頭是為請(qǐng)求提供的配置信息所以請(qǐng)求返回后，我們可以通過來獲取響應(yīng)情況。攔截器攔截器攔截器用于攔截發(fā)起的請(qǐng)求或用于攔截返回的響應(yīng)。目錄上節(jié)內(nèi)容回顧使用第三方組件庫(kù) 如何發(fā)起請(qǐng)求請(qǐng)求錯(cuò)誤處理請(qǐng)求帶參 ...

jay_tian 2019-04-23 11:51 評(píng)論0 收藏0