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

简介: 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)


目录
相关文章
|
JavaScript 前端开发 应用服务中间件
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
这篇文章分析了Vue项目在服务器部署后出现404错误的原因,主要是由于history路由模式下服务器缺少对单页应用的支持,并提供了通过修改nginx配置使用`try_files`指令重定向所有请求到`index.html`的解决方案。
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
|
JavaScript 前端开发 数据处理
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
这篇文章讨论了Vue中实现权限管理的策略,包括接口权限、路由权限、菜单权限和按钮权限的控制方法,并提供了不同的实现方案及代码示例,以确保用户只能访问被授权的资源。
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
缓存 JavaScript 前端开发
vue面试题
vue面试题
263 64
|
JavaScript 安全 前端开发
【Vue面试题二十九】、Vue项目中你是如何解决跨域的呢?
这篇文章介绍了Vue项目中解决跨域问题的方法,包括使用CORS设置HTTP头、通过Proxy代理服务器进行请求转发,以及在vue.config.js中配置代理对象的策略。
【Vue面试题二十九】、Vue项目中你是如何解决跨域的呢?
|
12月前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
130 0
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
|
JavaScript 前端开发 编译器
【Vue面试题三十二】、vue3有了解过吗?能说说跟vue2的区别吗?
这篇文章介绍了Vue 3相对于Vue 2的改进和新增特性,包括性能提升、体积减小、更易维护、更好的TypeScript支持、新的Composition API、新增的Teleport和createRenderer功能,以及Vue 3中的非兼容性变更和API的移除或重命名。
【Vue面试题三十二】、vue3有了解过吗?能说说跟vue2的区别吗?
|
JavaScript 前端开发 API
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?
这篇文章讨论了Vue项目中错误的处理方式,包括后端接口错误和代码逻辑错误的处理策略。文章详细介绍了如何使用axios的拦截器处理后端接口错误,以及Vue提供的全局错误处理函数`errorHandler`和生命周期钩子`errorCaptured`来处理代码中的逻辑错误。此外,还分析了Vue错误处理的源码,解释了`handleError`、`globalHandleError`、`invokeWithErrorHandling`和`logError`函数的作用和处理流程。
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?
|
缓存 监控 JavaScript
【Vue面试题二十六】、SSR解决了什么问题?有做过SSR吗?你是怎么做的?
这篇文章详细介绍了服务端渲染(SSR)的原理、解决了哪些问题、以及如何在Vue应用中实现SSR,包括项目配置、代码结构、路由配置、数据预取和服务器端的渲染流程。
【Vue面试题二十六】、SSR解决了什么问题?有做过SSR吗?你是怎么做的?
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
261 0

热门文章

最新文章