vue axios 请求没有执行，无任何报错信息

已于 2022-04-23 11:31:07 修改
阅读量6.1k 收藏 1
点赞数
文章标签： axios vue 设置中文key
于 2022-04-23 11:29:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mrliucx/article/details/124361162
版权

问题描述

在特殊浏览器例如：QQ浏览器下跑的vue项目，接口无法请求，但是又没有报错信息，经排查
在请求头设置参数时，需要携带当前系统打开的浏览器名称
由于国内浏览器大多数都是中文，所以导致请求头获取到的是中文，但是不报任何错误信息。
请求方法

一步步排查后，把中文换回英文即可，需要携带请求的key，尽量不要设置中文。

如果需要设置中文也可以（但后续对数据库数据读取问题未知）

console.log(encodeURI('浏览器'), '使用encodeURI()编码'  //%E6%B5%8F%E8%A7%88%E5%99%A8
console.log(decodeURI('%E6%B5%8F%E8%A7%88%E5%99%A8'), '使用decodeURI()解码' //浏览器

请求头

进击的yuan人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FaaS — Serverless — 实现原理
烟云的计算
09-07 1937
目录 文章目录目录请求驱动分布式运行时 请求驱动 请求驱动，也就是支持基于请求的动态弹性伸缩并且简化请求处理逻辑。有些同学可能把这个模型称之为 Event-driven，也就是事件驱动，但是请求驱动实际是事件驱动中的一个分支。 什么是请求驱动呢？从传统的微服务架构看，当一个外部系统请求进来后，一般都会经过一个 L4/L7 的负载均衡，然后给到不同的微服务实例上面。在同一个微服务实例本身进程的内部，一般会有两块逻辑，第一块逻辑是请求管理，它可能是一个 HTTP Server 和一些 Handlers，有一
vue手撸移动端后台（7）axios网络请求和模拟数据
暴躁兔子的记录
05-06 523
我们的前端页面大致上整理完毕，下面进入对数据的操作了，不然不知道怎么结合数据岂不是瞎玩么。 有一些么有后台接口经验的前端同学也不要慌，咱们搞个简单的，也不要自己提供接口，网上都有写好的。 http://jsonplaceholder.typicode.com/ 这个网站，提供了公共的一些可以访问的接口 我们就用这个网站的接口了，直接浏览器访问就有返回数据 获取10个用户：http://jso...
解决vue axios的封装 请求状态的错误提示问题
10-17
今天小编就为大家分享一篇解决vue axios的封装 请求状态的错误提示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue向api请求不到数据，返回了一个html页面，使用postman发送请求却可以得到数据
weixin_45286211的博客
03-29 6366
vue向api请求不到数据，返回了一个html页面，使用postman发送请求却可以得到数据
vueJs请求接口获取数据的实现及跨域问题--转载
HJY_Lilyth的博客
04-26 1233
前言 本文基于vue-cli3。 一、通过api接口获取数据 在vuejs中请求接口，大体分为两种方式：vue-source和axios。它们都是经过良好封装的http请求插件。 下文将简单介绍一下使用方法。 1. vue-source 略讲，详情见这篇博客。 安装 首先，安装该插件： npm install vue-source --save 然后，在项目src/main...
前端vue 发送axios请求没反应
恩琪
01-29 5459
这是我今天遇到的一个最蠢的问题，当写添加和修改用到同一个接口， 这个功能之前已经写完成了 没问题， 当我测试时候出现问题了 发送请求也没有反应， 我使用debug也不会进去， 我就去把方法全改了一遍，传的参数也改了， 还是没能解决问题， 最后没办法 我就删除重新写了一遍（是有备份的）还是同样的问题 这个问题任然没有解决， 我就很纳闷了， 这才想到是不是有缓存， 我clear下服务器 然后重启 问题解决了？？？？ 只能大叹口气了 所以在这给个建议，让大家（自己）以后少遇到坑 有时候可能代码修改过后没
axios请求后端拿不到数据的解决方案
热门推荐
lucky__peng的博客
09-21 1万+
文章目录 问题场景问题原因要点1要点2 问题分析解决方案解决方案一解决方案二解决方案三解决方案四解决方案五解决方案六 问题场景 场景很简单，就是一个正常 axios post 请求： axios({ headers: { 'deviceCode': '...
vue结合axios发送请求中产生的问题
m0_59588838的博客
11-12 332
记录vue项目引入axios遇到的一个新问题
vue项目，程序控制台不报错，但是也没有达到预期
Crazy_GirlLL的博客
10-25 360
error里面不一定有msg，所以直接《error.msg.indexOf('cancelCache') > -1》就会报错，需要在前面再加一层判断：《error.msg && error.msg.indexOf('cancelCache') > -1》，这样程序就向下走了，至于为什么控制台不报错，我也不清楚。敲代码时，有时控制台不报错，但是也不如预期那样展示。
vue使用axios给echarts渲染数据不展示的解决方法；
qq6642154166的博客
03-16 1977
因为自己遇到了所以分享下解决办法，也记一下笔记； 第一步： 1.这里首先引入Echarts组件 <template> <div> <Echart :options="options" id="centreRight2Chart1" height="220px" width="360px" ></Echart> </div> </template> 第二步：
vue axios请求成功却进入catch的原因分析
11-19
1.当axios请求完成后走的时then的代码块，如果then代码块中存在错误代码信息，这时就会进入catch中抛出异常（注意：此时控制台并不会报错，因为错误被catch捕获了） 2.axios是异步发起，若发起后页面刷新，那么就会...
解决在Vue中使用axios POST请求变成OPTIONS的问题
01-19
及报错信息（跨域） 主要解决方案：使用qs.stringify 1、安装qs npm install qs –save 2、axios配置和使用 在接口请求页面引入安装好的qs，如下图： 引入完成之后使用qs改变传递的参数data，如下： 这样就可以...
vue axios post发送复杂对象问题
12-10
现在vue项目中，一般使用axios发送请求去后台拉取数据。 在某些业务场景中，前端需要在某个字段中发送一个复杂的嵌套对象给后台做保存并处理。虽然axios可配置发送方式（post/get等），但如果不做其他配置，post的...
Vue 2.5.2下axios + express 本地请求404的解决方法
08-27
下面小编就为大家分享一篇Vue 2.5.2下axios + express 本地请求404的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
四则运算自动生成程序安装包
04-29
四则运算自动生成程序安装包
基于Linux的私有文件服务器(网盘).zip
04-29
基于Linux的私有文件服务器(网盘)
vue \axioserror\"跨域报错"
06-28
### 回答1： 在使用Vue和Axios请求后端接口时，可能会遇到“跨域报错”的问题。这是因为同源策略的限制禁止从一个源（域、协议、端口）向另一个源发送HTTP请求。 为了解决这个问题，我们可以在后端设置CORS（跨源资源共享）规则，允许前端访问该接口。例如，在Node.js中可以使用中间件cors来实现： const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); // 允许所有源访问 如果后端不方便设置CORS规则，也可以使用代理服务器的方式进行请求。在Vue的配置文件vue.config.js中添加proxy选项，将请求代理到正确的地址： module.exports = { devServer: { proxy: { '/api': { target: 'http://backend.com', changeOrigin: true, // 改变源 pathRewrite: { '^/api': '' } } } } }; 一旦代理配置好了，我们在Vue组件中的Axios请求就可以使用 apiUrl: '/api/example' 的方式了，这样就能避免跨域的问题产生。 总的来说，Vue和Axios在请求数据时可能会报“跨域报错”，需要在后端设置CORS规则或使用代理服务器的方式进行请求。这些方法都是为了解决同源策略带来的限制问题。 ### 回答2： Vue.js 是一种开放源代码的前端 JavaScript 框架，它可以轻松地构建单页面应用程序和用户界面。它的核心库可以自由地与其他库或现有项目集成。而 Axios 是一个基于 promise 的 HTTP 库，可以在浏览器和 Node.js 环境中使用。它提供了一种使用 HTTP 客户端向 Web 服务发送请求和处理响应的简单而优雅的方式。 在使用 Vue.js 和 Axios 进行前端开发时，由于浏览器的同源策略，可能会遇到“跨域报错”的问题。浏览器的同源策略指的是，当一个文档在一个域名下的时候，它不能访问一个不同域名下的资源。同源策略主要是出于安全考虑，防止恶意脚本跨域获取用户的个人敏感信息。 通常，我们可以通过代理服务器、JSONP、CORS（跨域资源共享）等技术来解决跨域的问题。下面我们来分别介绍一下这几种解决方法。 代理服务器是指在同一个域下建立一个服务器，通过这个服务器来转发请求和响应，在前端页面中发送请求给代理服务器，由代理服务器转发请求到后端服务器，再拿到后端服务器的响应数据，最后将响应传回前端页面。这样做的好处是，不需要关心跨域问题，只需要将代理服务器设置好即可。但是也有一些缺点，例如需要另外再部署一个服务器，增加了服务器的负担。 JSONP (JSON with Padding) 是一种基于 GET 请求的跨域解决方案，其原理是通过 script 标签进行 JSON 数据的获取。JSONP 可以利用 script 标签加载不同域的脚本，服务端返回一段 padding 的 JS 代码，里面包含一个回调函数的调用，JS 引擎解析这段代码，产生一个函数调用，然后 JSON 数据作为参数传给这个函数，这个函数就可以使用 JSON 数据了。JSONP 使用简单，但是只支持 GET 请求，不支持 POST、DELETE 等其他请求方式。 CORS 是一种可以让 Web 应用程序跨域访问资源的机制，它需要浏览器和服务器的共同支持。在服务端设置 Access-Control-Allow-Origin 头部信息，可以指定允许哪些域名访问资源。CORS 使用方便，但是需要服务端来做处理。 综上所述，当遇到 Vue.js 和 Axios 的 “跨域报错” 问题时，可以通过以上三种方式来解决。其中，代理服务器的实现需要另外再部署一个服务器，JSONP 仅适用于 GET 请求，而 CORS 兼容性良好，但需要服务端来进行处理，需要注意的是，在使用代理服务器或 JSONP 时，不要将敏感信息泄露给其他域名。 ### 回答3： Vue是一种JavaScript框架，用于构建用户界面。Axios是一种基于Promise的HTTP客户端，用于在浏览器和Node.js中发送HTTP请求。他们的联合使用可以轻松地从客户端向服务器发送请求和接收响应。然而，由于安全原因，浏览器限制了跨域请求，这导致了许多由Vue和Axios组成的应用程序出现了跨域错误。 跨域请求是指在不同域名下进行的请求，例如：当我们使用 localhost:8080 发起一个请求到 www.baidu.com 时，由于这两个域名不同，会触发浏览器的跨域限制。这样会抛出“跨域报错”。 解决跨域问题的方法有很多种。其中一种常用的方法是在服务器端设置跨域访问的权限。具体地，可以在服务器端设置Access-Control-Allow-Origin头部信息，允许对指定的域名进行跨域请求。而如果没有这样设置，那么客户端会在发送请求的时候被浏览器拦截报错。 除了在服务器端设置外，我们还可以使用JSONP等技术解决跨域问题。JSONP是一种跨域的技术，它利用script标签可以跨域的特性，实现跨域请求。但是，JSONP只能用于GET请求，并且无法处理POST等其他类型的请求。 在使用Vue和Axios时，我们也可以通过设置一些参数来解决跨域问题。例如，我们可以使用Vue-cli的proxyTable来允许本地的服务器代理向远程的API发送请求。我们也可以在Axios中设置withCredentials参数，允许跨域请求携带cookie等认证信息。 总之，跨域报错是由于浏览器的安全机制所导致的，解决方式有很多种，具体的方法要根据不同的场景来进行选择。Vue和Axios也提供了很多方便的工具来解决跨域问题，使得我们可以很轻松地构建出跨域请求的应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值