axios请求JSON问题详解

blastz 发布于2019-08-21 18:32 / 1351人阅读

摘要：此时传递的参数是格式如果出现的错误，则是跨域问题。本人喜欢直接配置服务器来解决跨域例如配置配置跨域请求当参数是字符串时，默认的是。其实这是一个无效的数据，为，为空。我更喜欢使用库的方式，代码如下之后使用的时候，只需要传递对象就可以

当参数是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);
  });

服务器托管云服务器 json请求 json数据请求网址 json数据请求地址 ajax请求json

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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