Vue面试题之跨域问题的解决

本文涉及的产品
.cn 域名,1个 12个月
简介: Vue面试题之跨域问题的解决

跨域问题

3.3.1.什么是跨域(背)

跨域是指跨域名的访问,以下情况都属于跨域:

跨域原因说明 示例
1域名不同 www.jd.comwww.taobao.com
2域名相同,端口不同 www.jd.com:8080www.jd.com:8081
localhost:8080 与 localhost:8090
3二级域名不同/子域名不同 item.jd.commiaosha.jd.com
4 协议不同 http://jd.comhttps://jd.com
5域名和ip地址 http://jd.com192.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)


目录
相关文章
|
2月前
|
缓存 JavaScript 前端开发
2024 前端高频面试题之 Vue 篇
2024 前端高频面试题之 Vue 篇
60 8
|
3天前
|
JavaScript
vue面试
vue面试
9 0
|
1月前
|
JavaScript 缓存 算法
VUE知识体系、VUE面试题
Vue 计算属性与方法差异:计算属性有缓存,基于依赖自动重计算,适合数据转换;方法无缓存,每次调用都会执行,参数灵活。计算属性相当于属性,可读写;方法用于处理逻辑。v-if 与 v-show:v-if根据条件创建或销毁DOM,适合不频繁切换;v-show通过改变display控制显示,频繁切换更优。v-if提高渲染效率,v-show维护DOM稳定性。v-for中key的作用:key帮助Vue识别唯一节点,优化diff算法,提高性能,避免使用index或random。
|
2月前
|
移动开发 缓存 JavaScript
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
35 6
|
2月前
|
JavaScript 前端开发 API
vue面试题目汇总
vue面试题目汇总
57 4
|
2月前
|
缓存 JavaScript 前端开发
Vue常见面试题 标准答案汇总一
Vue常见面试题 标准答案汇总一
89 1
|
2月前
|
监控 JavaScript 前端开发
vue基础面试题10问
vue基础面试题10问
51 0
|
2月前
|
人工智能 缓存 JavaScript
【利用AI刷面试题】AI:十道Vue面试题巩固一下知识
【利用AI刷面试题】AI:十道Vue面试题巩固一下知识
|
2月前
|
负载均衡 前端开发 Java
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
287 0
|
2月前
|
存储 JavaScript 安全
Vue基础面试题题目一
Vue基础面试题题目一
35 0