axios請求JSON問題詳解

blastz 發布于2019-08-21 18:32 / 1497人閱讀

摘要：此時傳遞的參數是格式如果出現的錯誤，則是跨域問題。本人喜歡直接配置服務器來解決跨域例如配置配置跨域請求當參數是字符串時，默認的是。其實這是一個無效的數據，為，為空。我更喜歡使用庫的方式，代碼如下之后使用的時候，只需要傳遞對象就可以

當參數是JSON對象時，默認的Content-Type是application/json。

axios.post("/user", {
    firstName: "Fred",
    lastName: "Flintstone"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

此時傳遞的參數是Request Payload格式{firstName:"Fred",lastName:"Flintstone"}

如果出現No "Access-Control-Allow-Origin" header is present on the requested resource的錯誤，則是跨域問題。本人喜歡直接配置服務器來解決跨域：例如Nginx配置：Nginx配置跨域請求

當參數是JSON字符串時，默認的Content-Type是application/x-www-form-urlencoded。

axios.post("/user", JSON.stringify({
    firstName: "Fred",
    lastName: "Flintstone"
  }))
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

此時傳遞的參數是Form Data格式key : value：

{"firstName":"Fred","lastName":"Flintstone"}:

如上。其實這是一個無效的數據，key為{"firstName":"Fred","lastName":"Flintstone"}，value為空。

要想使用application/x-www-form-urlencoded格式，需要進行數據轉換，雖然有兩種方式URLSearchParams和qs兩種方式。我更喜歡使用qs庫的方式，代碼如下：

axios.interceptors.request.use((req) => {
    if (req.method === "post") {
     req.data = qs.stringify(req.data);
    }
    return req;
}, (error) => Promise.reject(error));

之后使用axios的時候，只需要傳遞json對象就可以：

axios.post("/user", {
    firstName: "Fred",
    lastName: "Flintstone"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

云服務器 GPU云服務器 json請求 json數據請求網址 json數據請求地址 ajax請求json

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

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

Ajax詳解

摘要：當請求完成后注冊一個回調函數。該請求是否觸發全局處理事件如等，請求發送前的回調函數，用來修改請求發送前，此功能可用來設置自定義頭信息，在函數中返回將取消這個請求。例如，為請求指定一個回調函數名。即改變回調函數的，默認就是傳入的整個對象。 Ajax Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語言，可以說是已有技術的組合，主要用來實現客...

jokester 2019-08-23 14:15 評論0 收藏0
vue多環境配置方案

摘要：前端項目上線的時候不可避免的會考慮到不同的運行環境需要前端請求不同服務地址的問題方案一一般的情況下可以使用環境變量進行分環境打包開發環境繼續使用代理需要編譯的環境通過設置環境變量去控制打包過程最終生成適用于不同環境的前端資源有關環境前端項目上線的時候 , 不可避免的會考慮到不同的運行環境需要前端請求不同服務地址的問題方案一 : 一般的情況下 , 可以使用vue-cli-servi...

zhouzhou 2019-08-23 18:14 評論0 收藏0
vue開發項目完全指南

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

leoperfect 2019-08-23 16:16 評論0 收藏0
jwt前后端整合方案

摘要：到這里，基于的前后端分離實現方案就搞定啦四關于的一些思考實際上，在使用的過程中有一個比較致命的缺點，就是一旦簽發了，在到期之前就會始終有效，除非服務器部署額外的邏輯。結語以上是關于基于的前后端分離實現方案的總結和思考。一、jwt是什么 JWT全稱， JSON Web Token，是一個以JSON為基準的標準規范。舉例：服務器認證以后，生成一個 JSON 對象，發回給用戶，就像下...

nevermind 2019-08-23 17:11 評論0 收藏0
VUE跨域詳解以及常用解決跨域的方法匯總

　　跨域　　要知道在請求后臺接口遇到Access-Control-Allow-Origin時，這就表明跨域了。　　首先解釋跨域，是因為瀏覽器的同源策略所導致，同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，同源是指：域名、協議、端口相同　　解決跨域常用方法：　　一、VUE中常用proxy來解決跨域問題　　1、在vue.config.js中設置如下代碼...

3403771864 2022-11-24 22:27 評論0 收藏0