使用Vue的axios自定義header時報錯處理~

ysl_unh 發布于2019-08-21 17:49 / 1028人閱讀

前端Axios的設置處理
當 Content-Type 為 application/json 的時候，會先產生一個 OPTION 請求（如 Network所示）。

可以把 Content-Type 設置為 application/x-www-form-urlencoded。
設置 Auth 請求頭，參看官方文檔

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";

舉個栗子~
// 新創建 axios 實例配置
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"),
    }
});

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

前端設置成功后可能會遇到以下問題cross 帶option的請求不被服務端所允許，所以就需要后臺來處理，可能遇到的問題和處理的方法如下：

這個報錯后的解決辦法是后端配置以下東西~

    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-

重點在這里
requested-with,token");這個是配置自定義header內的token appid之類的~~
如果有疑問請在下方進行提問，有時間必作答

云服務器 GPU云服務器 cdn自定義header 自定義鏡像的使用 tomcat啟動時報錯 php自定義異常處理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90053.html

Vue+Typescript中在Vue上掛載axios使用時報錯

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

AaronYuan 2019-08-26 10:37 評論0 收藏0
vue項目中使用element-ui下拉框選項值為對象時報錯

摘要：在做后臺管理時，使用了搭配，請求方法使用了插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。在做后臺管理時，使用了vue搭配elementUI，請求方法使用了axios插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。對select下拉框的文檔沒有讀的很仔細，百度過幾篇文章，也沒有理解他們表達的意思，然后自己又去看文檔，把他的屬性看...

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

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

eccozhou 2019-08-26 11:46 評論0 收藏0
vue開發項目完全指南

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

leoperfect 2019-08-23 16:16 評論0 收藏0
后端開發者的Vue學習之路（五）

摘要：由服務器提供的響應來自服務器響應的狀態碼來自服務器響應的狀態信息服務器響應的頭是為請求提供的配置信息所以請求返回后，我們可以通過來獲取響應情況。攔截器攔截器攔截器用于攔截發起的請求或用于攔截返回的響應。目錄上節內容回顧使用第三方組件庫如何發起請求請求錯誤處理請求帶參 ...

jay_tian 2019-04-23 11:51 評論0 收藏0