为什么我的axios post请求没有在我的后端发送任何数据回我的外部api？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

分享我在 vue 项目中关于 api 请求的一些实现及项目框架

本文主要简单分享以下四点如何使用 axios 如何隔离配置如何模拟数据分享自己的项目框架本文主要目的为以下三点希望能够帮到一些人希望能够得到一些建议奉上一个使用Vue的模板框架我只是把我觉得有用的东西分享出来罢了...使用 axios 请求接口 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。...在后端项目中我二次封装了下拉框，通过参数接收Function，传递$api.api_test.test省了可以少写很多代码。...关于开发环境和生成环境的配置读取看到很多中做法，分享下我在项目中使怎么做的。目前项目中的做法是在config文件夹中根据环境新建不同的配置，然后通过index.js暴露对应环境的配置。...关于在项目中使用 mock 看到好多项目把mock混在项目中使用，就感觉很难受，所以想办法独立出来了，功能不强大，只是足够用在一些小Demo上，简单模拟一下数据就可以让我们的Demo不用担心api接口失效导致

1.3K1 0

为什么我在客户端发送信息的时候按发送按钮无法发到服务器端?

一、前言前几天在Python白银交流群【无敌劈叉小狗】问了一个Python通信的问题，问题如下：大家能帮我看看为什么我在客户端发送信息的时候按发送按钮无法发到服务器端？...具体的表现就是点了发送但服务器收不到，如下图所示：二、实现过程这里【啥也不懂】给了一个指导，他当时在赶车，电脑不太方便，让粉丝截图了代码，直接看图的。这里提出来了几个怀疑的点。...顺利地解决了粉丝的问题。如果你也有类似这种Python相关的小问题，欢迎随时来交流群学习交流哦，有问必答！三、总结大家好，我是Python进阶者。...这篇文章主要盘点了一个Python库下载失败的问题，文中针对该问题，给出了具体的解析和代码实现，帮助粉丝顺利解决了问题。...最后感谢粉丝【无敌劈叉小狗】提出的问题，感谢【啥也不懂】给出的思路，感谢【莫生气】等人参与学习交流。

1.2K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

因为知道了Axios，使用Vue请求数据的效率暴增！！！

安装 npm安装直接script标签引用 ES6 import引用全局配置使用发送一个最简单的GET请求发送一个POST请求一次合并发送多个请求背景 JQuery时代，我们使用ajax向后台提交数据请求...Axios非常适合前后端数据交互，另一种请求后端数据的方式是vue-resource，vue-resource已经不再更新了，且只支持浏览器端使用，而Axios同时支持浏览器和Node端使用。...$axios.get(); 使用发送一个最简单的GET请求这里我们发送一个带参数的get请求，params参数放在get方法的第二个参数中，如果没有参数get方法里可以只写路径。...('获取数据失败'); }); 发送一个POST请求当然，我们也可以发送一个POST请求，post方法的第二个参数为请求参数对象。...，可以一次性发送多个请求，如果全部请求成功，在axios.spread方法接收一个回调函数，该函数的参数就是每个请求返回的结果。

1.3K1 0

axios使用指南

今天主要介绍一下axios在浏览器端的使用：首先来看一下axios快捷方法的使用,前端工程师在向后端发送请求的时候，用的最多的就是get请求和post请求，我们分别演示一下如何利用axios向后端发送...这里有一点需要特别注意，用axios发送post请求，数据会默认转化为json格式发送到后端，并且会自动设置默认请求头：Content-Type:application/json; charset=utf8...这里前端工程师需要注意的是：前端在发送请求时需要知道，后端能够解析哪种格式的数据。如果后端程序只支持解析json格式的数据，那么用axios发送post请求的默认方式则没有任何问题。...但是如果后端服务不支持解析json格式的数据，只支持查询字符串格式的数据（name=zs&age=18,类似这样的数据格式叫做查询字符串格式），那么axios在发送post请求时则需要修改两处配置。...cookie 以上便是axios的使用了，但是还有其他的很多api没有说到，大家可以留言补充。

3.2K4 1

一文带你看懂前后端之间图片的上传与回显

一文带你看懂前后端之间图片的上传与回显原理篇上传文件需要发送请求。在这些请求中，浏览器将数据拆分为小的“块”，然后通过连接逐个发送这些块。...流在第一次理解时有点难它们值得有一篇完整的文章（或多篇文章）来介绍，基本上，流有点像是数据的传送带，每个块都可以在进入时被处理。就 HTTP 请求而言，后端会逐位接收请求的各个部分。...当我们使用请求上传文件时，浏览器将使用流一次发送一个块的数据。这是因为我们不能一次将整个文件放在请求对象中。multipart/form-data我们直接去打印这个文件的请求。...multipart/form-data格式允许在一个请求中同时发送文本数据和二进制文件数据，这对于上传文件非常有用。...如果尝试将文件数据编码为JSON字符串并在application/json格式的请求中发送，通常会导致数据丢失或不可用。

4.2K1 0

Fetch还是Axios——哪个更适合HTTP请求？

前端开发最重要的部分之一是通过发出 HTTP 请求与后端进行通信，我们有几种方法可以异步地在 Javascript 中进行 API 调用。...JSON 如前所述，当我们在使用 .fetch() 方法的时候，需要对响应数据使用某种方法，当我们在发送带有请求的 body 时，需要对数据进行字符串化。...)); 在上面的例子中，你可以看到，使用 axios 我们没有额外的一行代码，在 .fetch()的例子中，我们必须将数据转换为 JSON 格式。...，但是如果请求以任何方式失败，我就能够检查 .catch() 部分中的错误类型并返回正确的消息。...在第一种情况下，我创建了一个 console.log，告知发送请求的情况，在响应拦截中，我们可以对响应做任何操作，然后返回。

6.8K2 0

SpringBoot + Vue （axios）实现 Restful API 交互

请求一、以实体类的形式接收参数 2.2.3 PUT 请求 2.2.4 DELETE 请求在 RestFul API 中，前后端是分离的，后端不在负责视图的渲染，只负责返回指定的前端请求后端 Rest...Jquery 中的 $.ajax，以及现在常用的第三方 http 库 axios 一、SpringBoot 编写后端 API 1.1 编写一个最简单 API 服务我在 application.yml...@RequestMapping("/") 这个注解表示配置请求的路径，我们没有指定请求方法，所以任何方法都可以接受 1.2 常见接收参数的方式其他的请求方式都是一样的，这里我们以 GET 请求为示例...并且使用 post 请求携带的参数也比 get 请求更多。我在写项目当中，post 请求常常会用来做登录表单提交，数据添加等等为了测试方便，我编写了一个如下的实体类。...axios 中使用 POST 提交数据时，数据会以 application/json 发送到后端，这是和传统的 form 表达那不同的地方。

7.4K3 4

我在Android应用中发现硬编码的Facebook和Google API密钥（以及为什么这是个坏主意）

我在Android应用中发现硬编码的Facebook和Google API密钥（以及为什么这是个坏主意）☕ 逆向分析APK很有趣...直到你发现生产环境密钥就这么赤裸裸地躺在代码里。...内容提要在分析一个公开的Android APK时，我直接在应用的strings.xml文件中发现了硬编码的Facebook和Google API凭证。...*********[redacted].firebasestorage.app 重要提醒：任何硬编码在...：通过HTTPS端点动态获取使用NDK混淆并存入Android Keystore对于Google API密钥：按应用包名和SHA-1指纹限制仅开放必要API权限核心原则：只要存在于APK中的内容，就不算秘密...披露声明：已通过正规渠道通知受影响企业，本文所有数据均已脱敏处理。

3171 0

一篇文章带你了解axios网络交互-Vue

对于axios网络交互，去使用axios的同时，首先你要了解它是什么，如何使用才是。说axios网络交互，即发送请求，前面说两种方法，一为发送GET请求，二为POST请求。解决axios跨域问题。...axios是基于Promise的HTTP库，可以用在浏览器和node环境中，在应用程序中，向服务器端发送Ajax请求同时获取服务器端相应的HTTP请求响应库。我们为什么使用它呢？它的好处有哪些。...可以单独使用，支持Promise API，解决了JavaScript“回调地狱”的问题，可以发送Cookie，HTTP认证，并发请求，请求和响应的拦截，取消请求等，自动转换json数据，适用于restful...在vue中通过Ajax从服务器端获取数据，前后端分离，后端负责提供api请求接口，前端用Ajax获取服务器数据。服务器端的api接口，一般使用restful api。...一般分：发送GET请求，和发送POST请求： GET传递，请求参数有两种写法，一种是直接在url中附加参数，一种是使用parmas属性添加GET参数。

1.4K1 0

解决：node后端接收到axios的post请求体竟为空？

前言：在做项目时，你们是否会遇到这样一个问题：使用axios发送post请求，传入了Object格式的参数，在node后端req.body接收到的参数为空，但是网页上抓包检查时，发现请求的body...显而易见，服务器中req.body请求体中没有任何参数。但是页面确实是提交了数据呀？于是我在页面F12进行网络抓包来查看发出去的request请求 ? ...这就能解释为什么我第一次发送的是obj对象数据，请求体携带的确是json格式的数据，说明axios会自动转换数据为json格式后来我又在源码上看到了转换请求体参数格式的相关代码 if(utils.isURLSearchParams...在发送请求时，如果参数对象data不是表单数据格式对象，就会默认把数据转为json字符串，放到请求体中的。...所以我之前发过去的obj对象，被axios自动转化为了json字符串但是到此为止，感觉还是没有任何环节有致命问题呀？将JSON字符串格式的参数发给服务器，确实应该也没什么问题呀？

8.7K6 2

BuildAdmin20：前端项目如何设计一个异步API请求模块

Kubernetes（K8s）集群部署架构前言在前后端分离的架构中，后端负责封装api接口，前端负责请求api接口。...我通常使用Springboot来开发后端，在前端项目中就要实现api请求模块。在之前拆解BuildAdmin的项目中，因为一直在构建前端页面的各个模块，就没有开发后端接口。...后面就打算开始后端开发，例如菜单的请求、数据页面的渲染等等。那么前端如何请求这些后端接口呢，所以这边篇文章还是来封装一个前端的接口请求模块。...// 发送请求体数据的可选语法 // 请求方式 post // 只有 value 会被发送，key 则不会 data: 'Country=Brasil&City=Belo Horizonte...api模块这里就举一个例子，例如获取仪表盘的数据信息，我在api模块下定义了dashboard.ts文件，代码如下： import createAxios from '/@/utils/axios'

6832 0

axios

特点：在浏览器中发送XMLHttpRequests 请求、在node中发送http请求，支持Promise API 、拦截请求和响应、转换请求和响应数据总而言之，在脚手架项目中也就是在fetch 和...新建一个react项目其实没有必要新建，这是我项目的地址：✈️ 我的项目是React Hooks的项目，我们在pages/Home/index.tsx文件下新写一个请求。...这是一个接口，测试请求刚才我们上面的请求中我请求的是我本地的node编写的后端，如需要可自行下载当然，不是所有人都愿意去触摸后端，那么可以使用这个网站进行测试http://httpbin.org...所以本质上请求方式都是request。因此可以 axios()这么写也就是第一种写法。 2. 并没有 axios.get 那么为什么可以使用 axios.get那？...` 允许在向服务器发送前，修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream

5.1K1 0

都0202年了，你还不会前后端交互吗

文章目录一、后端 API 服务搭建二、原生 ajax 2.1 不带参数的 get 请求 2.2 带参数的 get 请求 2.3 带参数的 post 请求 2.4 get 请求返回 json 数据三...get 请求 4.3 fetch 发起post 请求，并带参数 4.4 fetch 发送 get 请求，返回 JSON 数据四、更好的封装 axios？...4.1 axios 的基本使用 4.2 axios 常用 API 4.2.1 get 请求 4.2.2 post 请求出了点小 bug，为啥后面的 post 请求， Flask 都接收不到一、...后端 API 服务搭建为了方便我采用 Python Flask 编写 API，如果有其他 api 服务搭建的同学，可以移步：四种方式搭建 API，总有一款适合你编写 Flask 程序应用框架 #!...axios 在 vue 中使用的会比较多，也是一个第三方的 http 请求库，可以在 Github 中找得到。

2.1K2 1

模拟请求|协议复现方案

我更喜欢说这个词，也有的人会说模拟请求，对应的关键词可能有 post 请求，抓包，发包，爬虫等等，但大致的意思是抓取请求数据包，然后脱离宿主机（浏览器，手机），将抓取的数据包重新发送一遍。...请求是能够正常发送过去的，但是 kuizuo.cn 这个站点是接收不到任何数据。...所以也就为什么很多 exe 程序（尤其是易语言）会带有 .vmp.exe 也就是 vmp 加壳，让程序很难被分析与破解。并且我就可以开启系统抓包，就可以看到应用程序模拟发送的请求数据包是什么。...后端应用开发另一种方式就是我自行搭建一个后端服务，然后将我要模拟的请求封装成一个接口供外部调用。只要我的这个后端服务允许跨域请求，那么我在浏览器或者在桌面端应用都能调用该接口。...（这其实也算是我为什么学 web 开发的初衷了）但是在一开始所介绍的小区开门应用中，这样的开发体验其实并不友好。因为我既要编写前端应用还要编写后端服务，相当于两个项目。

1K1 0

SpringBoot与Vue交互解决跨域问题【亲测已解决】

最近在利用springboot+vue整合开发一个前后端分离的个人博客网站，所以这一篇总结一下在开发中遇到的一个问题，关于解决在使用vue和springboot在开发前后端分离的项目时，如何解决跨域问题...在这里分享一下我解决跨域问题用到的两个方法，一、VUE前端配置代理解决跨域（1）Vue中让浏览器请求携带cookie 先说一下我是怎么发现出现跨域问题的吧，最开始我在从前端浏览器向后台发送请求的时候是没有携带浏览器的...cookie的，但是这样就导致了无法对浏览器的请求进行验证，所以在后来我用了一个方法让浏览器在每次发送请求的时候在http请求头中携带上cookie，方法如下：在vue的main.js方法中写入如下代码...（2）vue中配置代理解决跨域在vue中解决跨域问题其实也比较简单，因为我们每次浏览器发送的请求中，URL的前半部分一定是相同的，比如http://localhost:8080/blogs与http:...$axios.post("/login") 二、springboot后端配置解决跨域在springboot框架的后端想要解决跨域问题，只需要添加一个类CorsConfig，并且让它实现WebMvcConfigurer

2.6K1 0

node后端接收到axios的post请求体为空

node后端接收到axios的post请求体为空？？？...使用axios发送post请求，传入了Object格式的参数，在node后端req.body接收到的参数为空，但是网页上抓包检查时，发现请求的body确实是携带了参数的？...首先，我使用中间件，在数据提交到后台时，先在控制台打印一下req.body这个对象 node.js 中部分代码 vue中部分代码显而易见，服务器中req.body请求体中没有任何参数。...经过漫长的网上冲浪，并查了一下axios的源码，我发现axios的文档上有这样一句话这就能解释为什么我之前发obj对象数据，请求体携带的确是json格式的数据，说明axios会自动转换数据为json格式后来我又在源码上看到了转换请求体参数格式的相关代码...2：在node中配置body-parser可以获取到除formdata之外的数据 3：在node中配置connect-multiparty可以所有数据 vue中使用axios发送post请求

1.1K1 0

：第十五章 - 传统开发模式下的 axios 使用入门

当然，如果你之前并没有接触过后端，不知道怎么选择的话，推荐你尝试 .NET Core，示例的后端项目我也会同步放在 Github 上。　　...2.3、新增用户数据(/api/user) post 请求，提交一条新的用户数据，因为是采用 Restful 风格的接口设计，所以请求的地址与获取所有的用户数据相同，仅仅是 http 谓词的不同。...在 axios 中，我们发起一个 http 请求后，在 then 回掉方法中进行请求成功后的数据处理，在 catch 回掉方法中捕获请求失败的信息。...既然我们已经获取到了后端接口返回的数据值，那么这里的问题就可能出现在赋值这上面。我们可以在 then 回调中打印 this.users 看看。 ? 　　...这里因为我并没有实现后端 token 验证，所以这里就只是进行一个演示，你可以从浏览器的控制台中看到只要我们发起一个 http 请求，就会输出的我们打印的信息。

1.9K3 0

Vue3 + Spring Boot 项目中跨域问题的排查与解决

## 问题现象在我们团队的一个前后端分离项目中，前端使用的是 Vue3，后端是 Spring Boot。正常情况下，前端通过 axios 调用后端接口应该能成功获取数据。...## 问题分析首先，我回顾一下 Vue3 和 Spring Boot 的通信机制。前端通过 axios 发送请求，后端通过 Spring Boot 提供 REST 接口。...使用 Postman 测试接口为了排除前端问题，我尝试使用 Postman 直接访问后端接口，结果发现接口可以正常返回数据，说明后端逻辑没问题。这说明问题出在浏览器的 CORS 策略上。...检查前端请求配置在 Vue3 中，我们使用 axios 发送请求，代码如下： ```javascript import axios from 'axios'; const apiClient =...这说明后端虽然配置了 CORS，但实际上没有生效。 ### 5. 检查后端日志查看 Spring Boot 应用的日志，发现确实有请求到达，但没有看到任何关于 CORS 的日志。

6181 0

前后端交互的弯弯绕绕

前后端交互：，收拾一下心情让我们来聊一聊AJax吧，随着前端的飞速发展，前后的交互也发生了天翻地覆的变化：前后端交互的方式有很多： AJAX、表单提交、WebSocket、RESTful API、......：JSON请求：程序开发中为了方便数据传输一种格式，通过在请求头设置：application/json 后端可以更方便解析对象；用户注册请求： POST http://127.0.0.1:3000/...，Ajax能够让页面无刷新的请求数据；在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好；我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据...数据：没有 axios 方便：需要手动设置请求头：Content-Type：application/json 告诉服务器端，发送的内容类型是 JSON 字符串；传递的请求体数据，也需要手动的进行JSON...，比如文件读取、数据库查询、网络请求等：在回调地狱中，每个异步操作结果都依赖于前一个操作的完成，这就导致了大量的回调函数嵌套，形成了深层次的嵌套结构Demo需求：展示默认第一个省，第一个城市，第一个地区在下拉菜单中因为

1.6K2 0

Vue + Node.js 搭建「文件上传」管理后台

本教程后文，教你搭建上传文件的后端部分，请继续阅读。创建「上传文件」功能我们来写一个 JS 脚本，这个脚本调用 Axios 发送 HTTP API 请求，与后端服务器通讯。...这个脚本包含 2 个功能 upload(file): POST 数据到后端，再加一个上传进度的回调，可以放个上传进度条。...最后我们调用 Axios 提供的 post()&get() 来向后端 API 发送 POST & GET 请求创建一个 Vue 多文件上传组件接下来，我们来写一个 Vue 上传组件，这个组件要包含上传文件的所有基本功能...这是因为后端部分还没有跑起来，接下来，我带领大家手把手搭建上传文件的后端部分。 Vue 前端「上传文件」源码你可以在我的 github 上下载到完整的 Vue 上传文件 Demo。...${err}`, }); } }; 设置后端 Rest API 上传文件的路径当 Vue 前端通过 Axios 发送 HTTP 请求时，我们需要通过路由来确定服务器应该如何响应我们来设置三种常用到的上传文件所需功能

13.7K3 0

点击加载更多

分享我在 vue 项目中关于 api 请求的一些实现及项目框架

为什么我在客户端发送信息的时候按发送按钮无法发到服务器端?

因为知道了Axios，使用Vue请求数据的效率暴增！！！

axios使用指南

一文带你看懂前后端之间图片的上传与回显

Fetch还是Axios——哪个更适合HTTP请求？

SpringBoot + Vue （axios）实现 Restful API 交互

我在Android应用中发现硬编码的Facebook和Google API密钥（以及为什么这是个坏主意）

一篇文章带你了解axios网络交互-Vue

解决：node后端接收到axios的post请求体竟为空？

BuildAdmin20：前端项目如何设计一个异步API请求模块

axios

都0202年了，你还不会前后端交互吗

模拟请求|协议复现方案

SpringBoot与Vue交互解决跨域问题【亲测已解决】

node后端接收到axios的post请求体为空

：第十五章 - 传统开发模式下的 axios 使用入门

Vue3 + Spring Boot 项目中跨域问题的排查与解决

前后端交互的弯弯绕绕

Vue + Node.js 搭建「文件上传」管理后台

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐