axios

我们需要配置代理。代理可以解决的原因：因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据。 报错如下： 解决方案如下： 1. 在项目根目录新建vue.config.js文件 2. 配置代理 module.exports = { devServer: { proxy: { '/api' : { target: 'http://localhost:4000', // 对应自己的接口 changeOrigin: true , ws: true , pathRewrite: { '^/api': '' } } } } } 3. 在main.js文件，配置一下axios.defaults.baseURL = '/api' 这样就可以保证动态的匹配生产和开发环境的定义前缀了，代码如下： /* 入口JS */ import Vue from 'vue' import App from './App.vue' import router from './router' import axios from 'axios' Vue

为什么转行应该选Web前端？ 互联网公司的生存始于前端，导致web前端的贵和火 一般初创的互联网公司最烧钱的时候往往都是刚刚获得风投或者融资的时候，因为他们要把钱砸向前端，因为那时候没有客户访问，对于企业来说只有先做好前端技术、做好客户体验一切才有可能。 用户体验做好，才有人访问，访问的人多了，才会优化后端，才做客户分析。因此，他们获得融资后第一件事就是招聘Web前端开发人员，就是要先把前端开发做起来，客户体验先做起来，这就是为什么前端很火，前端工程师工资很高的原因。 web前端优秀人才需求大，企业高薪抢聘 互联网+时代，web前端市场需求大。随着信息产业的迅猛发展，行业人才需求量也在逐年扩大。据国内权威数据统计，未来五年，我国信息化人才总需求量高达 1500万—2000万 人。其中**“网络工程”“UI设计”“web前端”**等人才的缺口最为突出。 web前端就业范围广，具有多重选择 现在web前端的就业面是很广泛的，能够选择的岗位有**：网页制作、前端制作工程师、网站重构工程师、前端开发工程师、资深前端开发工程师、前端架构师等等。** 这样的一个职位的主要职责是与交互设计师、视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。 前端 年纪大了还适合转行吗？ 其实对于能不能转行到前端开发

摘要 　　 axios是一个基于promise的HTTP库，可以用于浏览器中进行AJAX请求处理。在项目中，为了实现通用性，封装了一个axios请求。 axios封装 1、配置环境变量 // 根据不同环境变量选择不同的接口服务器域名 export const BASE_URL = process.env.REACT_APP_API; 2、创建axios实例 　　 创建axios实例可以根据官方文档进行属于自己的配置，具体属性可以参考 https://www.kancloud.cn/yunye/axios/234845 // 创建axios实例 const service = axios.create({ baseURL: BASE_URL, headers: { 'Content-Type': 'application/json;charset=UTF-8' }, timeout: 5 * 1000 // 请求超时时间 }); 3、创建request拦截器 　　 在请求、响应被then 或 catch 处理前拦截它们，在发送请求之前可以做些处理或者对请求错误做些什么处理。具体配置可以参考官网。 // request拦截器 service.interceptors.request.use( config => { // 登录时，Token登录 // const token = //

爬取热门视频的bv号 爬取首页html const axios = require('axios') const url = 'https://www.bilibili.com/' const headers = { "accept": "*/*", "accept-language": "zh-CN,zh;q=0.9,en;q=0.8", "content-type": "application/x-www-form-urlencoded; charset=UTF-8", "sec-fetch-dest": "empty", "sec-fetch-mode": "cors", "sec-fetch-site": "same-site", "referrer": "https://www.bilibili.com", 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36', } const resp = axios.get(url, {headers}) resp.then( ({data}) => { console.log(data) } ) 根据dom,

b站经验获取 如何获得经验值？ 投币前 投币后 csrf对应的cookie字段 投币和点赞需要重写headers中的referer, 不然会出错, 即请求是由视频页面发出的 投币 // 投币 export async function coin(aid, multiply = 1, select_like = 0) { const url = "https://api.bilibili.com/x/web-interface/coin/add" headers['referer'] = `https://www.bilibili.com/video/${enc(aid)}` const data = { aid, // av的id号 multiply, // 硬币数目 select_like, // 是否同时喜欢 cross_domain: true, // 跨域 csrf } let resp = await axios.post( url, data, {headers}, ) return resp.data } 点赞 // 点赞 export async function like(aid, like = 1) { headers['referer'] = `https://www.bilibili.com/video/${enc(aid)}` const data = {

前言 作为一位 Vuer（vue开发者），如果还不会这个框架，那么你的 Vue 技术栈还没被点亮。 Nuxt.js 是什么 Nuxt.js 官方介绍： Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。 我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。 Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。 如果你熟悉 Vue.js 的使用，那你很快就可以上手 Nuxt.js 。开发体验也和 Vue.js 没太大区别，相当于为 Vue.js 扩展了一些配置。当然你对 Node.js 有基础，那就再好不过了。 Nuxt.js 解决什么问题 现在 Vue.js 大多数用于单页面应用，随着技术的发展，单页面应用已不足以满足需求。并且一些缺点也成为单页面应用的通病，单页面应用在访问时会将所有的文件进行加载，首屏访问需要等待一段时间，也就是常说的白屏，另外一点是总所周知的 SEO 优化问题。 Nuxt.js 的出现正好来解决这些问题，如果你的网站是偏向社区需要搜索引擎提供流量的项目，那就再合适不过了。 我的第一个 Nuxt.js 项目 我在空闲的时间也用 Nuxt.js 仿掘金 web

先上预览地址 http://106.12.212.110:8077/#/ 1.创建项目 　使用vue init webpack temperaure 创建一个vue项目 然后安装axios zrender 　命令分别是 npm install axios -S npm install zrender安装这2个组件 2.创建公共文件 　 在以后的使用中会出现本地调试和先上地址这是我们就创建以下目录 　src/components这个目录放置我们的页面文件 src/js 这里放置我们以后绘制折线图 阴影图等公共方法 　src/mock 这里放置我们的模拟数据 　src/store 这里放置请求的是本地还是线上的方法 　router就是路由 首先我们在src/store 文件下创建http.js文件 在里面添加以下代码 import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) //configUrl这里写线上地址 httpType 这里是请求本地还是线上 线上换成http 本地换成 mock data未传递的数据可根据自己需要自行修改 const store = new Vuex.Store({ state:{ configUrl: '' , httpType: "mock"

关于引入nuxt到项目中的思考 为什么前端要引入同构SSR a.为了更好的seo和首屏加载速度 b.引入BFF层，为前端赋能，提升前端解决问题的能力 nuxt带来的优点 1.更为清晰严格的结构:nuxt类似于egg等框架提供了一套结构和约束机制，所以，基于nuxt基础上创立项目，结构会更清晰一些。 2.简单易上手，开箱即用，集成了ui框架，测试框架等。 npx create-nuxt-app appName 一套下来就可以直接运行起来，迁移成本较低 关于同构SSR 虽然使用了服务端渲染，但是这个只能叫同构SSR，和传统的服务端渲染还是有区别的。目前同构SSR的本质就是集成页面组件，路由，前端状态，在服务端中运行生成快照，将生成的快照HTML传给客户端。需要注意的是，由于同构的这种快照所需的计算量远大于传统服务端渲染，所以单机性能上，可能要弱于传统服务端渲染。 同构SSR的实现得意于虚拟DOM的出现，虚拟DOM的最大好处并非Diff算法而是为前端赋能，把HTML的DOM抽象化，可以在服务端、IOS、安卓甚至智能家电上运行。 同构SSR的实质是当用户首次请求时，通过node端生成一个HTML快照给前端，之后用户在当前页面上的操作，其实都是一个SPA的操作交互，前端的路由交互还是依靠history路由去处理，而非传统路由，所以其实还是一个“ SPA ”。这样的处理，可以在保证首屏速度时

上篇文章讲述了Matrix-web整体实现的权限控制的思路。现在来回顾一下： 首先，用户需要登录，填用户名、密码，后端接收到登录请求，进行用户、密码的校验，校验成功后则根据用户名生成Token，并返回给浏览器。 浏览器收到Token后，会存储在本地的LocalStorge里。 后续浏览器发起请求时都携带该Token，请求达到后端后，会在Filter进行判断，首选判断是否为白名单url（比如登录接口url），如果是则放行；否则进入Token验证。如果有Token且解析成功，则放行，否则，返回无权限访问。 Filter判断后，请求达到具体的Controller层，如果在Controller层上加上了权限判断的注解，则生成代理类。代理类在执行具体方法前会根据Token判断权限。 取出用户的Token并解析得到该请求的userId，根据userId在从存储层获取用户的权限点。权限控制是RBAC这种方式实现的。 获取到用户权限点后，获取权限判断的注解的权限信息，看用户权限点是否包含权限注解的权限信息，如果包含，则权限校验通过，否则则请求返回无权限。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7hlz5kP4-1590667445450)(https://ws3.sinaimg.cn/large