axios

charles proxy 代理转发和抓包

别说谁变了你拦得住时间么 提交于 2020-08-10 04:16:14
下载 https://www.charlesproxy.com/latest-release/download.do proxy->proxy setting serve, 注意跨域 const express = require('express') const cors = require('cors'); const app = express(); app.use(cors()); app.get('/abcd/**', function (req, res) { console.log('app') res.send('Hello World'); }) app.listen(8080) web const url = "http://www.baidu.com/test/abcd"; let resp = axios.get(url); resp.then(({ data }) => { console.log("data", data); }); 拦截请求成功 来源: oschina 链接: https://my.oschina.net/ahaoboy/blog/4348158

团队作业第五次——冲刺总结

浪子不回头ぞ 提交于 2020-08-09 20:52:07
豌豆射手团队作业第五次——站立式会议+alpha冲刺总结 这个作业属于哪个课程 课程地址 这个作业要求在哪里 作业地址 团队名称 豌豆射手 这个作业的目标 完成项目及答辩 编写代码规范 编写冲刺 测试 总结随笔 作业正文 .... 其他参考文献 .... 1 项目预期计划 小组原计划打算充分利用五一假期的时间,在alpha冲刺阶段将项目的基本的内容以及交互逻辑完成,包括前端的七个模块:包括界面,交互逻辑,请求等,后端逻辑处理部分以及数据库表及与后端的连接,在截止时间前两天将粗糙的成品放到服务器上,用剩下的一到两天时间对项目进行修改,修补漏洞,bug 2 现实进展 前端的所有模块的界面以及基本逻辑已经实现 后端数据接口也已经完成 数据库表创建以及表与表之间的联系已经完成且已经创建一部分测试内容到数据库当中 已经成功地将项目部署到网络上,以及可以通过网址正常访问 不足:界面美观程度不够 还有部分界面交互逻辑上存在问题 部分界面的功能还没有完善 3 过程体会 因为团队是第一次配合完成那么大型的项目,可能在时间安排以及工作安排上会有一些不如意或者不完善的地方,但在一组人齐心协力地努力之下,最后的成果虽然还存在许多的瑕疵,但是这算是完成了基本项目的雏形,虽然过程十分艰难,一组人有很多人都是第一次接触完整的项目,第一次由一个人负责一个模块的开发,很多内容对于我们来说是全新的,包括vue框架

记一次node上的小采坑 [TypeError: Converting circular structure to JSON]

本秂侑毒 提交于 2020-08-09 14:55:39
最近在做微信授权登陆,因为安全性,Acess_Token这一部分是在node上获取,然后再返回给前端。 node用的axios,在获取Acess_Token的时候axios的catch捕获到了一个错误,[TypeError: Converting circular structure to JSON]。 百度搜了一下说是因为 JSON.stringify 引起的,不记得写过JSON.stringify,但还是找了找,就那么几行的代码翻了个底朝天也没看到哪怕有一句的 JSON.stringify。 从头到尾排各种错误各种调试,真是想不出来是哪里的错误,甚至还想换成JQ或者fetch试试,结果……暂且不提。 干脆把ajax那部分的业务逻辑代码全部注释掉,然后只输出获取到的信息,结果catch没有异常了,直接输出了获取到的结果。 找到了突破口就好说了,接下来又一步一步的调试,发现问题是出现在 res.send 的身上。 ajax返回来的数据我放在了一个对象中的属性里,报错。 但是如果只获取拿到的数据中的data字段,也就是不包括axios上的信息只有微信的信息(access_token, expires_in, refresh_token, openid, scope),就可以正常返回了。 初步估计是因为axios返回结果比较特殊,无法正常返回,具体研究有时间会研究一下,这里做一个小标记

Laravel API call from Vue.js cause CORS for GET routes

别等时光非礼了梦想. 提交于 2020-08-09 13:45:29
问题 I recently wanted to integrate the VueJS front end app to my Laravel application. First of all, I installed fruitcake/laravel-cors library in Laravel and made the connection from Vue.js to Laravel using Vue Axios . Now all types of requests working ( POST , PUT , UPDATE ...) except GET . Specifications are as follow: Laravel App: Middleware: protected $middleware = [ //... Rest of the middleware //CORS middleware \Fruitcake\Cors\HandleCors::class ]; CORS Config file: return [ /* * You can

vue处理跨域

我的梦境 提交于 2020-08-09 13:31:19
1.什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。 源指协议,端口,域名。只要这个3个中有一个不同就是跨域。 协议跨域 http://a.baidu.com访问https://a.baidu.com; 端口跨域 http://a.baidu.com:8080访问http://a.baidu.com:80; 域名跨域 http://a.baidu.com访问http://b.baidu.com; 2.跨域产生的背景 现在很多公司都是采用前后分离的方式开发,那么出现经常和会跨域打交道。 跨域的处理方案: A. Jsonp(只能处理Get请求),B. cors(后端开启),C. 代理服务器(vue项目中vue.config.js中配置) 下面我详细讲讲第三种代理服务器方式。 假设请求的API地址:https://localhost:44369/api/Index/GetMuserList 配置在vue.config.js中的内容,配置好之后要Ctrl+C取消,然后cnpm run dev重启前端服务 module . exports = { devServer : { host : 'localhost' , //前端地址 port : 8081 , // 前端端口号 open : true , //自动启动浏览器 proxy : { // 配置跨域处理

Vue无限滚动加载数据

允我心安 提交于 2020-08-09 05:17:05
Web项目经常会用到下拉滚动加载数据的功能,今天就来 种草 Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-loading --save 第二步:引用 import InfiniteLoading from 'vue-infinite-loading' ; export default { components: { InfiniteLoading } } 第三步:使用 1.基本用法 <template>   <div>     <p v- for="item in list">       <span v-text="item"></span>     </p>     <!--infinite-loading这个组件要放在列表的底部,滚动的盒子里面!-->     <infinite-loading @infinite="infiniteHandler"></infinite-loading>   </div> </template> <script>   import InfiniteLoading from 'vue-infinite-loading' ;   export default {   data() {    return {   list: []   };   },  

为promise增加abort功能

痞子三分冷 提交于 2020-08-09 02:44:46
Promise只有三种状态:pending、resolve、reject,一个异步的承诺一旦发出,经历等待(pending)后,最终只能为成功或者失败,中途无法取消(abort)。 为promise提供abort功能的思路有两种: 手动实现abort,触发取消后,异步回来的数据直接丢弃(手动实现,比较稳妥) 使用原生方法AbortController中断请求(实验中的方法,有兼容性,ie不支持) 手动实现abort方法有两种模式 :都是依赖promise的接口间接实现 promise race方法 let PromiseWithAbort = function(promise){ let _abort = null; let Pabort = new Promise((res,rej)=>{ _abort = function(reason ='abort !'){ console.warn(reason); rej(reason); } }); let race = Promise.race([promise,Pabort]); race.abort = _abort; console.log(promise,Pabort); return race; } let p1= new Promise(res=>{ setTimeout(()=>{ res('p1 success');

别在js中写后台地址了——用好React/Vue脚手架的环境变量

安稳与你 提交于 2020-08-08 19:12:53
背景 前端开发都少不了对后台的调用,后台地址配置在哪里,是一个很纠结的问题 为此大家开动脑筋,想了不少办法: 在代码中定义一个常量如baseUrl,后台请求时,统一拼上这个baseUrl; 问题:本地、开发、测试、生产环境地址不一样,得反复改地址; 前端与后台代码部署在一个域下,使用相对路径访问后台; 问题:开发阶段本地调试的时候,还是避免不了要用方案一来配置一个baseUrl,且这个改动与代码放在一起,一不小心就提交到代码库,CI打出来的包就不对了。 解决方案 只要是通过React和Vue脚手架创建的项目,都支持配置环境变量,使用方式: 定义环境变量 #React项目.env文件 REACT_APP_BASEURL=https://prod.utcook.com #Vue项目.env文件 VUE_APP_BASEURL=https://prod.utcook.com 在代码中使用 import axios from 'axios'; const baseUrl = process.env.REACT_APP_BASEURL; axios.get("${baseUrl}/api/user/list"); 本地调试时,后台地址不一样怎么办? 有两种方式可以定义本地地址: 1. 通过.env.local文件: #React项目.env.local文件 REACT_APP_BASEURL

JS明明写的请求是并行,为何仍然串行请求?

亡梦爱人 提交于 2020-08-08 18:30:46
环境 测试环境:electron + vue + axios 需求 想要做并行请求(比如爬虫)需要尽量快的请求页面。 假如一次发出请求到返回所需时间为100ms: 方案1(串行):请求一次接口等待返回处理结果后继续下一次请求。这样会受制于请求的速度,假如请求100次那么需要总时间为100ms * 100 = 10000ms 方案2(并行):利用Promise,同时发起多个请求,但不等待每个请求结束。而是Promise.all等待其全部结束再进行处理。 假如请求100次那么需要总时间为100ms * 1= 100ms 可以看出速度有极大的提升,理论上(实际需要看机器配置和网络带宽情况)无论多少请求都只需要100ms。 并行实现 我们的需求就是方案2的并行实现。所以如下实现: async t () { const time1 = new Date (). getTime () / 1000 const task = [] for ( let i = 0 ; i < 100 ; i ++ ){ task . push ( this . t1 ()) // 发起请求 } await Promise . all ( task ) // 等待所有请求结束 // await this.$http.all(task) // 与Promise一样 const time2 = new Date ().