前端跨域的原因以及解决方案(vue),一文让你真正理解跨域

简介: 前端跨域的原因以及解决方案(vue),一文让你真正理解跨域

跨域这个问题,可以说是前端的必需了解的,但是多少人是知其然不知所以然呢? 下面我们来梳理一下vue解决跨域的思路。


什么情况会跨域?

跨域的本质就是浏览器基于同源策略的一种安全手段。所谓同源就是必须有以下三个相同点:协议相同、域名相同、端口相同。如果其中有一项不同,即出现非同源请求,就会产生跨域。


跨域实际上是浏览器的限制,开发中使用 postman请求接口能够获得数据就印证了跨域是浏览器的限制这个问题。


那浏览器为什么要弄个跨域出来?

总的来说:浏览器跨域机制的主要目的是保护用户的安全和隐私.


为什么说跨域能保护用户的隐私呢 ?  比如说你打开了某个银行的官网 xxyh.com,然后又打开了一个恶意网站 xxxx.com,此时两个网站的域名肯定是不同的,这时候这个恶意的网站想从你银行网站中获取你的cookie等个人信息,那么浏览器就会阻止它的请求.  


我们开发过程中为什么会出现跨域?

刚才说了,协议、端口、域名,只要有一个不同,请求就会跨域。而我们开发中,项目运行在http://localhost:3000 上,这时候协议是 http,端口是 3000,域名是 localhost。而我们的请求一般是发到了后端给的服务器API地址,这时候协议端口域名出现不同了就会跨域 !


解决方法


一般前端中解决跨域问题的方法有 JSONP,CROS,Proxy等,这里我们主要讲解一下在 vue中常用的 CORS方法:

一般来说,我们会在vue.config.js中配置proxy反向代理来解决跨域,但是解决的逻辑是怎样的呢?


拿我的项目来举例:首先,我们要知道proxy中代码的作用:


// 接口转发
    proxy: {
      '/dev': {
        target: APIURl, // 后端服务器的地址
        changeOrigin: true, // 设置为 true,允许跨域
        pathRewrite: {
          '^/dev': '' // 可选的,重写请求路径,如果后端接口的路径中有特定的前缀,可以进行替换
        }
      }
    }
'/dev',这里指定了一个路径匹配规则,当前端发起的请求路径以'/dev'开头的时候会触发反向代理配置.

所以想要发起的请求走反向代理,就需要我们的请求是以'/dev'开头,但是我们封装的api的路径里面好像并没有开头写上'/dev',而且如果每个api都需要带上'/dev'的话,那需要在封装axios请求的时候每次在路径前面加上'/dev'也太麻烦了吧.


于是,我们可以在请求拦截器中设置请求的基地址为'/dev',然后每次请求都自动在请求路径前面带上了'/dev',就完成了每次请求都走反向代理这个需求.


请求拦截器  request:    


3aa653bc71024c519a660fefc63b7add.png


我的基地址是配置在环境变量中的,他在环境变量中是:


374b803f5e62452aaa010fe0aafb5959.png


也就等价于:


const service = axios.create({
  baseURL:'/dev', // url = base url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: define.timeout, // request timeout
})

这样,我们就给每个请求路径前面都加上了'/dev',然后在vue.config.js中,proxy发现我们的请求是'/dev'开头的,就会将我们的请求代理到:


target: APIURl, // 填你后端服务器的地址

并且设置:


changeOrigin: true, // 设置为 true,允许跨域

然后这个配置的作用:


pathRewrite: {
          '^/dev': '' // 可选的,重写请求路径,如果后端接口的路径中有特定的前缀,可以进行替换
        }

因为我们前面说了,'/dev'这个字符串的作用只是一个标识,我们给每个请求的开头都加上这个标识,就能够被反向代理识别到然后就能允许跨域 , 而后端给我的实际请求路径中是没有'/dev'的,所以,我们在他进入反向代理后,又要将他重写为 ' ', 让他不影响真正的请求路径.


举个例子:反向代理就像一个保安,每天都有很多人要从代理过去,但是保安怎么分辨出哪些请求是要让他通过的呢? 这时候领导和保安说,你看到那些人手里拿着员工牌牌(‘/dev’)的就让他通过,而我们在请求拦截器中给每个请求前加上了'/dev' ,所以我们的请求就都能代理到真实请求的服务器上去啦 !


然后,既然跨域是浏览器的保护机制,那么我们是不是可以将自己浏览器的保护机制关了,让我们在开发中可以直接发起跨域请求呢?


可以!  看我的这篇文章 :


谷歌关闭跨域限制.(生成一个开发浏览器),Chrome关闭跨域


希望对你有用!  !  !


有用的话别忘了点赞哦 ! ! !


相关文章
|
5月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
449 1
|
6月前
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
360 83
|
7月前
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
4318 90
|
5月前
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
210 22
|
7月前
|
前端开发 JavaScript 安全
剖析跨域问题始末及其解决方案——前端必备交叉知识(一)
跨域问题是前端开发中的常见挑战,了解并掌握不同的跨域解决方案能帮助你更高效地进行开发工作。本文对同源策略、跨域以及解决跨域的三种方案: CORS、JSONP、代理等跨域技术进行了介绍。选择合适的跨域解决方案非常重要。 在实际开发中,推荐优先考虑使用 CORS,因为它是现代浏览器支持的标准,且安全性较高。如果服务器无法修改,则可以考虑使用代理。如果是特殊情况,可以使用 JSONP,但要注意安全性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错
|
7月前
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
209 58
|
9月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
174 10
|
9月前
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
391 1
|
11月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
163 3
springboot解决js前端跨域问题,javascript跨域问题解决