摘要：跨域的简单小这是一个关于跨域的简单集合，在里面会加上自己的理解并添加相应的注释，尽量以简单的介绍跨域的方法，适合入门学习跨域的。介绍用的框架在端口和端口分别开启一个静态服务器，在两个端口间进行跨域传输数据。
跨域的简单小demo
这是一个关于跨域的简单demo集合，在demo里面会加上自己的理解并添加相应的注释，尽量以简单的demo介绍跨域的方法，适合入门学习跨域的。所有demo都是使用基于nodeJs的Web开发框架Express，需要一点点nodeJS的知识，如果不会nodeJS也没关系，注释里面会详细解释说明。
如果还有其他没提及的跨域方法，欢迎PR，谢谢！ 如果要收藏的话，欢迎star。 不定期更新教程，欢迎follow订阅。
demo介绍
用node的web框架express在3000端口和3001端口分别开启一个静态服务器，在两个端口间进行跨域传输数据。
配置文件解释
.gitattributes配置文件，可以改变这个github项目的语言标签 .gitignore配置文件，设置使用git上传时忽略哪些文件 package.json配置文件，主要是为了npm install而存在，安装express等模块 readme.md配置文件，在github上面展示说明项目，也就是现在正在看的文档
Set Up
运行环境
node.js 全局安装 npm 全局安装
运行步骤
git clone git@github.com:FatDong1/cross-domain cross-domain目录下npm install，下载项目所需的依赖 进入对应的demo目录，①node serverRes.js ②重新开一个dos窗口 ③node serverReq.js 或者在对应的demo目录下，dos窗口输入run.bat，直接一步完成上面的①②③
CORS跨域
项目运行起来之后，
请求数据页面地址： http://localhost:3000 查看数据： http://localhost:3001
JSONP跨域
项目运行起来后，
请求页面： http://localhost:3000 响应页面为 http://localhost:3001
postMessage跨域
这是html5的新API，适用于不同窗口iframe之间的跨域
项目运行地址： http://localhost:3000
window.name跨域
在 http://localhost:3000/a.html 使用js动态生成一个隐藏的iframe，设置src属性为" http://localhost:3001/c.html "，等这个iframe加载完之后，重新设置src属性为同源的地址" http://localhost:3000/b.html "(b.html是一个空的html文件)，现在iframe与a.html同源，那就可以访问window.name属性，而name值没有变化，因为window.name属性在不同的页面（甚至不同域名）加载后依旧存在。
项目运行地址： http://localhost:3000/a.html
location.hash跨域
在 http://localhost:3000/a.html 使用js动态生成一个隐藏的iframe，设置src属性为" http://localhost:3001/c.html#getdata "，在c.html判断hash值是否为"#getdata"，如果为"#getdata"，则在当前的iframe(c.html)中再生成一个隐藏的iframe，其src属性指向" http://localhost:3000/b.html "，因为a.html和b.html同源，所以可以在b.html里面修改a.html的hash值，这样a.html就可以通过获取自身的hash值得到数据
项目运行地址： http://localhost:3000/a.html
document.domain跨域
document.domain设置成自身或更高一级的父域，且主域必须相同。
注意！！
这是挂在我自己腾讯云域名(xuhaodong.cn)上的demo，所以抱歉这个demo无法在本地运行。不过我只是把demo放到了云服务器上，代码还是一样的，没有修改过。
线上访问地址： http://a.xuhaodong.cn/a.html
如果要在本地运行的话，需要搭建一个本地web服务器， 参考链接：https://github.com/web2hack/p...
后端设置代理proxy跨域
因为JS同源策略是浏览器的安全策略，所以在浏览器客户端不能跨域访问，而服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就没有跨越问题。简单地说，就是浏览器不能跨域，后台服务器可以跨域。
demo1 通过使用http-proxy-middleware插件设置后端的代理，在 http://localhost:3000 运行 demo2 不使用插件配置代理，直接使用http模块发出请求， 在 http://localhost:3000 运行
WebSocket跨域
WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
项目运行地址： http://localhost:3000/a.html
摘自 Github FatDong1（https://github.com/FatDong1/c...）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92533.html
摘要：关于，强烈推荐阅读跨域资源共享详解阮一峰另外，这里也整理了一个实现原理图简化版如何判断是否是简单请求浏览器将请求分成两类简单请求和非简单请求。 前言 从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。 个人见识有限，如有差错，请多多见谅，欢迎提出iss...
摘要：同源策略所谓同源是指协议，域名，端口均相同。同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。 一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）统一资源定位符（URL）是用于完整地描述Internet上网页和其他资源的地址的...
摘要：学习建议在学习其中一种跨域方法的时候，建议边运行项目里的，边在网上搜索博客文章学习这种跨域方法，这样有助于快速并且深入理解跨域。鉴于网上有很多文章详细讲述跨域知识，只是少了可以本地运行的，所以这里就不再赘述跨域知识。 前言 因为学习跨域需要配置本地服务器，可能会比较麻烦，所以自己根据网上的博客写了大多数跨域的简单demo，可以自己在本地运行，而且不用配置服务器。自己对于跨域的理解刚开始...
摘要：学习建议在学习其中一种跨域方法的时候，建议边运行项目里的，边在网上搜索博客文章学习这种跨域方法，这样有助于快速并且深入理解跨域。鉴于网上有很多文章详细讲述跨域知识，只是少了可以本地运行的，所以这里就不再赘述跨域知识。 前言 因为学习跨域需要配置本地服务器，可能会比较麻烦，所以自己根据网上的博客写了大多数跨域的简单demo，可以自己在本地运行，而且不用配置服务器。自己对于跨域的理解刚开始...
摘要：学习建议在学习其中一种跨域方法的时候，建议边运行项目里的，边在网上搜索博客文章学习这种跨域方法，这样有助于快速并且深入理解跨域。鉴于网上有很多文章详细讲述跨域知识，只是少了可以本地运行的，所以这里就不再赘述跨域知识。 前言 因为学习跨域需要配置本地服务器，可能会比较麻烦，所以自己根据网上的博客写了大多数跨域的简单demo，可以自己在本地运行，而且不用配置服务器。自己对于跨域的理解刚开始...
摘要：实现跨域的原理通过方式请求载入并执行一个文件，相当于通过的形式的导入一个外部的方法语法该函数是简写的函数，等价于在中，您可以通过使用形式的回调函数来加载其他网域的数据，如。将自动替换为正确的函数名，以执行回调函数。 更多详情见http://blog.zhangbing.club/Ja... 最近在项目开发的过程中遇到一些Javascript 跨域请求的问题，今天抽空对其进行总结一下，以...
阅读 1050·2021-11-22 15:33
阅读 3361·2021-11-08 13:20
阅读 1371·2021-09-22 10:55
阅读 2055·2019-08-29 11:08
阅读 772·2019-08-26 12:24
阅读 3069·2019-08-23 17:15
阅读 2227·2019-08-23 16:12
阅读 1934·2019-08-23 16:09
