当前位置: 首页 > news >正文

前端跨域的解决方案

跨域可以说是前端开发中很常见的一个问题了,虽然网上已经有很多类似的文章,不过本着记录自己的学习总结想法,还是要自己写一遍文章记录一下所学知识。

为什么会有跨域?

跨域的问题产生是因为浏览器的同源策略所导致的。同源策略的出发点是出于浏览器的安全所考虑的,如果每个人都可以随意访问其他站点的文件数据,将会产生非常严重的安全问题。

那怎么样才算是跨域呢?在浏览器里只要满足以下条件任一个就算跨域:

  1. 请求协议不同
    例:http和https
  2. 域名不同
    例:xxx.com和mmm.com
  3. 端口不同
    例:xxx.com和xxx.com:81

跨域的几种解决方法

1. JSONP

JSONP实现跨域的原理是动态创建script标签,src是具有跨域访问文件的能力,创建指定的地址和调用特定的回调方法获取数据,JSONP只支持get方法。

2.CORS

CORS(跨域资源共享)实现跨域的原理是在http请求头中加上指定的标记来告诉浏览器是否允许加载跨域的资源,也是现在主流的跨越解决方案。

3.iframe + location.hash

iframe+location.hash实现跨域是使用iframe加载资源,然后在iframe中修改父窗口的location.hash,因为location.hash的信息会展示在url上,所以url的长度限制了我们传输信息内容的长度。

4. iframe + window.name

iframe+location.hash实现跨域是使用iframe加载资源,然后在iframe窗口加载的内容修改window.name的值,使用了window.name的特性,在当前窗口页所有加载的页面共享一个window.name,但是window.name的容量限制为不超过2m。

5. iframe + document.domain

如果两个页面的主域名相同,但是子域名不同,可以修改document.domain为同一个域名,实现父子域名的跨域通信,只限制主域名相同的情况下。(不算严格意义上的跨域)

6. postMessage

postMessage是html5标准的新特性,使用该api可以实现多种场景的跨域通信,但是在一些比较老旧的浏览器可能不支持此方法。

7.反向代理

使用nginx或者nodejs中间件通过反向代理实现跨域访问。

8.WebSocket协议

WebScoket协议支持跨域通信。

总结

综合以上几种的跨域解决方案来看,解决跨域大都是在服务器端,不管是从安全性还是实用性上来说。使用前端手段解决跨域的方案或多或少都有点缺陷,前端解决跨域的重点也是在围绕src的能力来展开,不管是iframe还是动态创建script。

相关文章:

  • Hadoop所支持的几种压缩格式
  • mysql
  • Spring 依赖注入
  • 重定向
  • 软件测试-Svn服务器搭建全过程-基于Centos6.7-64bit
  • 陈新宇:CKafka在人脸识别PAAS中的应用
  • 开辟sys节点用户层直接操作物理地址(比/dev/mem方便)
  • centos 6.5 安装mysql
  • JavaScript 新语法详解:Class 的私有属性与私有方法 ...
  • SoftMax多分类器原理及代码理解
  • BugkuCTF web基础$_GET
  • Android逆向之旅---静态方式分析破解视频编辑应用「Vue」水印问题
  • 2017-12-24 手机编程环境初尝试-用AIDE开发Android应用
  • 2018 年第一季度报告:JavaScript 仍是最热门语言
  • Windows 7 用户已开始收到停止支持的提醒
  • ECMAScript6(0):ES6简明参考手册
  • ES6之路之模块详解
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • Python打包系统简单入门
  • 大型网站性能监测、分析与优化常见问题QA
  • 汉诺塔算法
  • 什么软件可以剪辑音乐?
  • 算法-插入排序
  • 一些css基础学习笔记
  • 用 Swift 编写面向协议的视图
  • 用Node EJS写一个爬虫脚本每天定时给心爱的她发一封暖心邮件
  • FaaS 的简单实践
  • NLPIR智能语义技术让大数据挖掘更简单
  • ​一文看懂数据清洗:缺失值、异常值和重复值的处理
  • # include “ “ 和 # include < >两者的区别
  • # Swust 12th acm 邀请赛# [ K ] 三角形判定 [题解]
  • #pragma 指令
  • (0)Nginx 功能特性
  • (07)Hive——窗口函数详解
  • (12)目标检测_SSD基于pytorch搭建代码
  • (2)(2.10) LTM telemetry
  • (2)(2.4) TerraRanger Tower/Tower EVO(360度)
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (M)unity2D敌人的创建、人物属性设置,遇敌掉血
  • (区间dp) (经典例题) 石子合并
  • (四)Linux Shell编程——输入输出重定向
  • (五)c52学习之旅-静态数码管
  • (五)Python 垃圾回收机制
  • (心得)获取一个数二进制序列中所有的偶数位和奇数位, 分别输出二进制序列。
  • (一)Thymeleaf用法——Thymeleaf简介
  • (一)VirtualBox安装增强功能
  • (转)c++ std::pair 与 std::make
  • .NET Core WebAPI中使用swagger版本控制,添加注释
  • .net core 源码_ASP.NET Core之Identity源码学习
  • .NET DataGridView数据绑定说明
  • .net 程序发生了一个不可捕获的异常
  • .NET 服务 ServiceController
  • .net 后台导出excel ,word
  • @angular/cli项目构建--http(2)
  • @Autowired和@Resource的区别