1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a.com/a.js https://www.a.com/b.js 同一域名,不同协议 不 【跨域介绍】 跨域是前端开发中常见的一种限制,源于浏览器的安全策略——同源策略。同源策略规定,一个页面只能与同源(即协议、域名和端口都相同)的资源进行交互。以下是对同源策略的详细解释: 1. 同一域名下允许通信:例如,http://www.a.com/a.js 可以正常访问 http://www.a.com/b.js,因为它们具有相同的协议(http),域名(www.a.com)以及端口(默认80)。 2. 同一域名下不同文件夹允许:http://www.a.com/lab/a.js 和 http://www.a.com/script/b.js 之间的通信也是允许的,尽管它们位于不同的文件夹下。 3. 不同端口不允许:如 http://www.a.com:8000/a.js 无法与 http://www.a.com/b.js 进行通信,因为端口号不同。 4. 不同协议不允许:http://www.a.com/a.js 不能访问 https://www.a.com/b.js,它们的协议(http 和 https)不同。 5. 域名和域名对应的IP不允许:http://www.a.com/a.js 无法访问 http://70.32.92.74/b.js,即使它们指向同一IP,但域名不同。 6. 主域相同,子域不同不允许:http://www.a.com/a.js 不能访问 http://script.a.com/b.js,虽然它们都属于 a.com 的子域,但主域不同。 7. 不同二级域名不允许:http://www.a.com/a.js 不能访问 http://a.com/b.js,它们的二级域名(www 和无)不同。 8. 完全不同的域名不允许:http://www.cnblogs.com/a.js 无法与 http://www.a.com/b.js 通信,因为它们的域名完全不同。 【前端解决跨域问题的方法】 1. **document.domain + iframe**:当主域相同,但子域不同时,可以通过设置`document.domain`使两个页面共享相同的域。例如,www.a.com 和 script.a.com 都设置 `document.domain = 'a.com'`,然后在各自的页面中创建iframe进行通信。 2. **动态创建script标签**:由于script标签不受同源策略限制,可以通过动态创建script标签来加载跨域的JS资源。当脚本加载完成时,可以触发回调函数执行相应的处理逻辑。 3. **location.hash + iframe**:通过在URL的hash部分传递信息,实现跨域页面间的通信。例如,cs1.html 创建一个指向 cs2.html 的iframe,cs2.html 改变cs1.html的hash值,cs1.html监听hash变化,从而传递数据。 4. **JSONP(JSON with Padding)**:JSONP是一种通过动态插入`<script>`标签,利用`callback`函数来绕过同源策略的方式。服务端返回一个包裹在特定函数调用中的JSON数据,前端接收到后执行该函数,实现跨域数据交换。 5. **CORS(Cross-Origin Resource Sharing)**:CORS是现代浏览器支持的一种跨域方式,通过在服务器端设置`Access-Control-Allow-Origin`响应头,允许指定的源进行跨域请求。这种方式需要服务器配合。 6. **POSTMessage API**:HTML5引入的API,允许跨文档消息传递,即在不同源的窗口之间发送消息。通过`window.postMessage()`方法发送数据,通过事件监听接收数据。 7. **代理服务器**:通过在本地或服务器端设置一个代理服务器,前端请求先发送到代理服务器,再由代理转发到目标服务器,从而避免直接的跨域问题。 以上方法各有优缺点,开发者需根据实际需求选择合适的跨域解决方案。在实际项目中,通常会结合多种方法,以达到最佳效果。在使用这些方法时,需要充分理解其工作原理,以确保安全性和效率。
- 粉丝: 3
- 资源: 929
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 中国石油大学 单片机原理与技术实验五 键盘扫描及显示设计实验
- 中国石油大学 单片机原理与技术实验四 静态存储器扩展实验
- 使用anaconda管理python环境
- ubuntu安装anaconda的教程
- python数据结构之字典及示例代码
- 1731260448754.jpeg
- 博图 博途1s保护解除DLL Siemens.Automation.AdvancedProtection.dll
- 基于Java和Shell语言的csj_21_08_20_task1设计源码分享
- 基于Typescript和Python的MNIST卷积神经网络模型加载与预测浏览器端设计源码
- 基于Python的RasaTalk语音对话语义分析系统源码
评论0