前端面试题22 | 什么是跨域问题?怎么解决?

哈喽小伙伴们大家好!新的一周开始啦~距离2024年结束也仅有两个月了,不知道大家年初给自己制定的目标实现了多少?不管怎样,接下来的两个月都请继续加油哦!我们坚持下来了,我们就是最棒的!

今天,继续来给大家分享一道面试题

在开发中,我们经常会遇到跨域的问题,尤其是开发前后端分离的项目,大家有没有想过为什么会出现跨域呢?

简单的来给大家举个例子

你要跟qq的一个人发消息,但是你没有添加他的好友,那么你们能直接进行交流吗?肯定是不能的

那你们后来添加了好友,但是你是在线的一个状态(这是在线指的是网络连接正常),而你的好朋友是离线的状态,那么尽管你发了消息,对方能收到吗?

那如果以上两个条件都满足了,你是qq发的消息,对方微信能收到吗?显然不能

那么,同理,我们来看看软件开发中的跨域

什么是跨域?

跨域(Cross-Origin Resource Sharing,CORS)是指浏览器在执行 AJAX 请求时,由于安全原因,对不同源(协议、域名或端口不同)之间的请求做出了限制。这种限制被称为同源策略(Same-Origin Policy),它防止一个域的文档或脚本与另一个域的资源进行交互。

为什么需要跨域?

同源策略是为了防止恶意文档获取对另一个域的敏感数据。例如,如果一个网站可以读取另一个网站的内容,那么它可能会读取用户的私人信息,如银行账户信息。

跨域问题的常见场景

  1. **前端请求API**:当你的前端应用尝试从一个不同的域(如第三方API)获取数据时。

  2. **前后端分离**:前端和后端部署在不同的域上。

  3. **单页面应用(SPA)**:SPA框架(如React、Vue、Angular)通常需要从后端API获取数据。

怎么解决跨域?

  1. **CORS响应头**:
  • 服务器可以在响应头中设置`Access-Control-Allow-Origin`来指定哪些源可以访问资源。

  • 例如,`Access-Control-Allow-Origin: *`允许所有域访问,或者指定具体的源,如`Access-Control-Allow-Origin: https://example.com`。

  1. **JSONP(已过时)**:
  • JSONP(JSON with Padding)是一种早期的解决方案,通过`<script>`标签绕过同源策略。

  • 由于安全性问题和限制,JSONP已被CORS取代。

  1. **代理服务器**:
  • 在前端和后端之间设置一个代理服务器,所有前端请求先发送到代理服务器,然后由代理服务器转发到目标服务器。

  • 这种方式可以隐藏后端服务的实际地址,并且可以处理跨域问题。

  1. **文档.domain**:
  • 如果两个域名属于同一个主域(例如`sub1.example.com`和`sub2.example.com`),可以通过设置`document.domain`来允许它们之间的交互。
  1. **窗口消息(Window.postMessage)**:
  • 使用`window.postMessage`方法在不同源的窗口之间安全地传递消息。
  1. **CORS Anywhere(Node.js代理)**:
  • 使用Node.js创建一个代理服务,如CORS Anywhere,它可以在开发环境中临时解决跨域问题。
  1. **浏览器插件**:
  • 对于开发和测试目的,可以使用浏览器插件来禁用同源策略。

好啦,今天的分享就到这里,我是程序媛小李,一位正在往全栈方向发展的前端小姐姐,希望今天的分享对你有帮助,我们下期再见!

相关推荐
多啦C梦a1 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心1 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq3 分钟前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端
独立开阀者_FwtCoder27 分钟前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
爱喝水的小周2 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02112 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅2 小时前
介绍electron
前端·javascript·electron
周胡杰2 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669132 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑2 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js