axios請(qǐng)求JSON問(wèn)題詳解

blastz 發(fā)布于2019-08-21 18:32 / 1553人閱讀

摘要：此時(shí)傳遞的參數(shù)是格式如果出現(xiàn)的錯(cuò)誤，則是跨域問(wèn)題。本人喜歡直接配置服務(wù)器來(lái)解決跨域例如配置配置跨域請(qǐng)求當(dāng)參數(shù)是字符串時(shí)，默認(rèn)的是。其實(shí)這是一個(gè)無(wú)效的數(shù)據(jù)，為，為空。我更喜歡使用庫(kù)的方式，代碼如下之后使用的時(shí)候，只需要傳遞對(duì)象就可以

當(dāng)參數(shù)是JSON對(duì)象時(shí)，默認(rèn)的Content-Type是application/json。

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

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

如果出現(xiàn)No "Access-Control-Allow-Origin" header is present on the requested resource的錯(cuò)誤，則是跨域問(wèn)題。本人喜歡直接配置服務(wù)器來(lái)解決跨域：例如Nginx配置：Nginx配置跨域請(qǐng)求

當(dāng)參數(shù)是JSON字符串時(shí)，默認(rèn)的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);
  });

此時(shí)傳遞的參數(shù)是Form Data格式key : value：

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

如上。其實(shí)這是一個(gè)無(wú)效的數(shù)據(jù)，key為{"firstName":"Fred","lastName":"Flintstone"}，value為空。

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

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

之后使用axios的時(shí)候，只需要傳遞json對(duì)象就可以：

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

GPU云服務(wù)器云服務(wù)器 json請(qǐng)求 json數(shù)據(jù)請(qǐng)求網(wǎng)址 json數(shù)據(jù)請(qǐng)求地址 ajax請(qǐng)求json

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

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

相關(guān)文章

Ajax詳解

摘要：當(dāng)請(qǐng)求完成后注冊(cè)一個(gè)回調(diào)函數(shù)。該請(qǐng)求是否觸發(fā)全局處理事件如等，請(qǐng)求發(fā)送前的回調(diào)函數(shù)，用來(lái)修改請(qǐng)求發(fā)送前，此功能可用來(lái)設(shè)置自定義頭信息，在函數(shù)中返回將取消這個(gè)請(qǐng)求。例如，為請(qǐng)求指定一個(gè)回調(diào)函數(shù)名。即改變回調(diào)函數(shù)的，默認(rèn)就是傳入的整個(gè)對(duì)象。 Ajax Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語(yǔ)言，可以說(shuō)是已有技術(shù)的組合，主要用來(lái)實(shí)現(xiàn)客...

jokester 2019-08-23 14:15 評(píng)論0 收藏0
vue多環(huán)境配置方案

摘要：前端項(xiàng)目上線的時(shí)候不可避免的會(huì)考慮到不同的運(yùn)行環(huán)境需要前端請(qǐng)求不同服務(wù)地址的問(wèn)題方案一一般的情況下可以使用環(huán)境變量進(jìn)行分環(huán)境打包開(kāi)發(fā)環(huán)境繼續(xù)使用代理需要編譯的環(huán)境通過(guò)設(shè)置環(huán)境變量去控制打包過(guò)程最終生成適用于不同環(huán)境的前端資源有關(guān)環(huán)境前端項(xiàng)目上線的時(shí)候 , 不可避免的會(huì)考慮到不同的運(yùn)行環(huán)境需要前端請(qǐng)求不同服務(wù)地址的問(wèn)題方案一 : 一般的情況下 , 可以使用vue-cli-servi...

zhouzhou 2019-08-23 18:14 評(píng)論0 收藏0
vue開(kāi)發(fā)項(xiàng)目完全指南

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

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

摘要：到這里，基于的前后端分離實(shí)現(xiàn)方案就搞定啦四關(guān)于的一些思考實(shí)際上，在使用的過(guò)程中有一個(gè)比較致命的缺點(diǎn)，就是一旦簽發(fā)了，在到期之前就會(huì)始終有效，除非服務(wù)器部署額外的邏輯。結(jié)語(yǔ)以上是關(guān)于基于的前后端分離實(shí)現(xiàn)方案的總結(jié)和思考。一、jwt是什么 JWT全稱， JSON Web Token，是一個(gè)以JSON為基準(zhǔn)的標(biāo)準(zhǔn)規(guī)范。舉例：服務(wù)器認(rèn)證以后，生成一個(gè) JSON 對(duì)象，發(fā)回給用戶，就像下...

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

　　跨域　　要知道在請(qǐng)求后臺(tái)接口遇到Access-Control-Allow-Origin時(shí)，這就表明跨域了。　　首先解釋跨域，是因?yàn)闉g覽器的同源策略所導(dǎo)致，同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，同源是指：域名、協(xié)議、端口相同　　解決跨域常用方法：　　一、VUE中常用proxy來(lái)解決跨域問(wèn)題　　1、在vue.config.js中設(shè)置如下代碼...

3403771864 2022-11-24 22:27 評(píng)論0 收藏0