四川阿坝建设招标网站,创新驱动发展战略方针,平面设计作品集展示,官方在家做兼职的网站哈喽小伙伴们大家好!新的一周开始啦~距离2024年结束也仅有两个月了,不知道大家年初给自己制定的目标实现了多少?不管怎样,接下来的两个月都请继续加油哦!我们坚持下来了,我们就是最棒的!
今天,继续来给大家分享一道面试题
在开发中,我们经常会遇到跨域的问题,尤其是开发前后…哈喽小伙伴们大家好!新的一周开始啦~距离2024年结束也仅有两个月了,不知道大家年初给自己制定的目标实现了多少?不管怎样,接下来的两个月都请继续加油哦!我们坚持下来了,我们就是最棒的!
今天,继续来给大家分享一道面试题
在开发中,我们经常会遇到跨域的问题,尤其是开发前后端分离的项目,大家有没有想过为什么会出现跨域呢?
简单的来给大家举个例子
你要跟qq的一个人发消息,但是你没有添加他的好友,那么你们能直接进行交流吗?肯定是不能的
那你们后来添加了好友,但是你是在线的一个状态(这是在线指的是网络连接正常),而你的好朋友是离线的状态,那么尽管你发了消息,对方能收到吗?
那如果以上两个条件都满足了,你是qq发的消息,对方微信能收到吗?显然不能
那么,同理,我们来看看软件开发中的跨域 什么是跨域
跨域Cross-Origin Resource SharingCORS是指浏览器在执行 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。
2. **JSONP已过时** - JSONPJSON with Padding是一种早期的解决方案通过script标签绕过同源策略。 - 由于安全性问题和限制JSONP已被CORS取代。
3. **代理服务器** - 在前端和后端之间设置一个代理服务器所有前端请求先发送到代理服务器然后由代理服务器转发到目标服务器。 - 这种方式可以隐藏后端服务的实际地址并且可以处理跨域问题。
4. **文档.domain** - 如果两个域名属于同一个主域例如sub1.example.com和sub2.example.com可以通过设置document.domain来允许它们之间的交互。
5. **窗口消息Window.postMessage** - 使用window.postMessage方法在不同源的窗口之间安全地传递消息。
6. **CORS AnywhereNode.js代理** - 使用Node.js创建一个代理服务如CORS Anywhere它可以在开发环境中临时解决跨域问题。
7. **浏览器插件** - 对于开发和测试目的可以使用浏览器插件来禁用同源策略。
好啦,今天的分享就到这里,我是程序媛小李,一位正在往全栈方向发展的前端小姐姐,希望今天的分享对你有帮助,我们下期再见!
