一些相关Vue面试题

Posted 2021-11-24 Maynor的大数据奋斗之路

跨域问题

3.3.1.什么是跨域（背）

跨域是指跨域名的访问，以下情况都属于跨域：

跨域原因说明	示例
1域名不同	www.jd.com 与 www.taobao.com
2域名相同，端口不同	www.jd.com:8080 与 www.jd.com:8081
	localhost:8080 与 localhost:8090
3二级域名不同/子域名不同	item.jd.com 与 miaosha.jd.com
4 协议不同	http://jd.com与https://jd.com
5域名和ip地址	http://jd.com与192.168.23.12

如果💃域名和端口都相同，但是请求路径不同💃，不属于跨域，如：

www.jd.com/item

www.jd.com/goods

而我们刚才是从file:///E:/vueworkspace1019/Chapter01/Goods.html去访问http://localhost:8090/，这属于域名不同，跨域了。

3.3.2.为什么有跨域问题？

1 浏览器的💃同源策略💃引起跨域问题

2 跨域不一定会有跨域问题。

答：a.跨域没有引起问题：

b.跨域引起了问题

因为跨域问题是浏览器对于ajax请求的一种安全限制：💃一个页面发起的ajax请求，只能是与当前页同域名的路径💃，这能有效的阻止跨站攻击。

因此：💃跨域问题 是针对ajax的一种限制💃。 通过跨域限制，有效阻止跨站攻击

但是这却给我们的开发带来了不便，而且在实际生产环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？

3.3.3.解决跨域问题的方案

目前比较常用的跨域解决方案有3种：

• Jsonp

  最早的解决方案，利用script标签（不受限）可以跨域的原理实现。

  限制：

  • 需要服务的支持（Getting）
  • 只能发起GET请求

• nginx反向代理

  思路是：利用nginx反向代理把跨域转为不跨域，支持各种请求方式

• CORS

  规范化的跨域请求解决方案，安全可靠。是w3c组织的标准

  优势：

  • 在服务端进行控制是否允许跨域，可自定义规则
  • 支持各种请求方式：get、post、put、delete
  • 限制访问的电脑的IP地址

  缺点：

  • 会产生额外的请求（可能发一次/二次请求）

我们这里采用cors的跨域方案。

Vue全家桶

各个组件(Vue-CLI、Vue-Router、Vuex、Axios)