网站管理和维护,旅游网站分析,深圳自适应网站推广价格,建设类似衣联网的网站Axios的诞生 为什么会诞生Axios#xff1f;说到Axios我们就不得不说下Ajax。最初的旧浏览器页面在向服务器请求数据时#xff0c;由于返回的是整个页面的数据#xff0c;所以整个页面都会强制刷新一下#xff0c;这对于用户来讲并不是很友好。因为当我们只需要请求部分数据…
Axios的诞生 为什么会诞生Axios说到Axios我们就不得不说下Ajax。最初的旧浏览器页面在向服务器请求数据时由于返回的是整个页面的数据所以整个页面都会强制刷新一下这对于用户来讲并不是很友好。因为当我们只需要请求部分数据时服务器返回给我们的确是整个页面的数据这样会造成网络资源的占用即十分消耗网络资源。为了提高数据请求效率异步网络请求Ajax就应运而生了它可以在页面无刷新的情况下请求数据。因此这样一来当我们只是需要修改页面的部分数据时可以实现不刷新页面的功能。 Axios的基础用法get、post、put 等请求方法 Axios常用的几种请求方法getpostputpatchdelete 1.get一般用于获取数据 2.post一般用于提交数据表单提交与文件上传 3.patch更新数据只将修改的数据推送到后端服务端 4.put更新数据所有数据推送到服务端 5.delete删除数据 当我们前端向后端发送请求的时候比如我们有一个服务器端口我们本地打开3000那么我们本地前端就无法在3000端口打开因为被后端占用了前端可以通过http//localhost3000/students给后端的/students路由发送get请求但是这里后端无法返回数据给前端因为后端无法跨域给前端的3001端口这时候就涉及到我们今天所学的内容代理服务器。 这里的错误是跨域无法返回数据也就是请求发出去但是回不来因为不是同一端口被拦下来了。 这个图可以帮助我们理解一个中间代理服务器在前端配置好那么他现在就是在前端的端口运行着也就是说它是端口3000然后我们用第一个方法配置这个中间服务器。 在package.json文件加“proxy”:http://localhost:3000,就是当我们前端不管在什么端口下运行我们发送的命令都通过3000端口发送。配置proxy之后必须重新启动前端。 配置好后我们用axios库里面的请求方法get向后端发送请求获取后端中的数据这里是当我们发送请求的时候我们把请求给代理服务器然后代理服务器给服务器然后服务器返回数据给代理服务器代理服务器没有跨域的限制所以可以拿到返回的数据然后前端就可以拿到和自己相同端口的代理服务器的数据。 如果改成index.html那么返回的直接就是当前端口下的public下的lndex.html文件也就是如果3000端口有的内容就不会发送get请求。如果改为 index2.html就会404因为前后端都没有找到对应的路径 但是这种proxy代理服务器就写死了只能从3000向3001如果我还有服务器3001 就无法拿到数据。因为这种方式只能配置一个代理服务器只能从3000-5000。 如果我们需要对多个服务器请求数据就需要多个代理服务器这时候我们就需要去写一个setupProxy.js文件去配置多个代理服务器。 添加这个文件然后 用的common.js 也就是说不是前端代码是node,js 这里的http-proxy-middleware代理服务器库是脚手架自带的。我们在package.json中直接用proxy“http://localhost:3001”也是用的这个库 这样就可以在3000端口请求5000端口的后端数据了。 然后我们去看我们写的配置文件都是什么作用。 host字段指的是本次请求从哪里发出的。 这里的请求地址是前端发出的请求中请求的接口地址Host就是请求的地址这里是localhost3001因为开代理所以认为和后端运行的端口一致。如果changeOrigin关闭就是3000因为从3000发过来的。不过只是欺骗服务器一下不影响代理服务器正常运行。 如果我们去掉了配置文件中的pathrewrite^api1:我们在前端路径加入api表示如果当前端口没有找到对应的数据就去后端对应的路由找这里我们api没有变成‘’所以后端我们访问的地址就变成了api/students这显然不存在 总结一下当我们前端只需要访问一个服务器以及从服务器获取数据的时候我们直接配置proxyhttp://localhost:3000就可以 了但是如果多个的话我们就需要去专门配置代理服务器文件然后设置多个代理服务器来指向我们想要访问的服务器地址。还有一个重要点这里proxy会报错应该改为{createProxyMiddleware}。这里就是代理服务器相关内容。明天见
