借助vue脚手架解决ajax请求跨域的问题(2022-04-25学习笔记)

node.js写的服务器,运行一个node.js文件。
在这里插入图片描述
真正的开发中不常用。
在这里插入图片描述
库封装好了ajax请求,我们使用axios,因为jQuery中的要执行DOM操作,我们使用vue的时候要尽量避免对DOM进行操作。下面两个库,都是对xhr封装。
在这里插入图片描述
windows的内置方法就有一个fetch,可以直接请求。IE浏览器用不了。
在这里插入图片描述
vue的插件库,vue.use。
在这里插入图片描述

axios

引入axios。在这里插入图片描述
发送一个axios请求。
在这里插入图片描述
出现跨域问题。
在这里插入图片描述
跨域是因为违背了同源策略。
同源策略:协议名、主机名、端口号必须一致。

  1. cors解决跨域,后端人员配置一些特殊的响应头。配置响应头出现的问题就是任何人都能找你这台服务器要数据。
  2. jsonp解决跨域问题。借助script标签的src属性在请求资源时不受同源策略的限制。 用的比较少,需要前后端的配合,只能解决gget请求的跨域问题。
  3. 开发中用的比较多的就是配置一个代理服务器。服务器与服务器之间传递数据,不要用ajxj,用最原始的http请求就行。

在这里插入图片描述

开启代理服务器:

  1. nginx
  2. vue-cli

配置代理服务器:
在这里插入图片描述
找代理服务器要数据:
在这里插入图片描述
请求的资源如果在代理服务器中本身就存在,就不会去找其余服务器请求。
代理服务的资源存在于public中。
在这里插入图片描述
这种配置代理服务器的方法,只能是配置一个代理服务器,也没有办法灵活控制去哪里请求资源。
在这里插入图片描述
配置代理服务器的另外一种方式:
在这里插入图片描述
请求前缀是什么,就代理请求,转发给请求资源的服务器。
在这里插入图片描述
在这里插入图片描述
转发给主服务器的时候需要重写路径。
在这里插入图片描述
一些介绍:
在这里插入图片描述
总结:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

vue-resource

首先安装一下插件库。
在这里插入图片描述
引入并且使用。
在这里插入图片描述
vm中出现$http。
在这里插入图片描述
使用方法。promise风格的请求。
在这里插入图片描述
这个库的维护频率不是很高,现在使用的比较少。axios的封装比较优秀。vue-resource在vue1.0的使用比较多。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值