📗目录
一、同源策略
二、什么是跨域
三、解决跨域
1.Jsonp实现跨域
2.代理的方式
3.CORS
🍊一、同源策略
所谓同源策略，就是指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可
🍊二、什么是跨域
单地理解就是因为JavaScript同源策略的限制，一个域的页面去请求另一个域的资源，A域的页面去请求B域的资源。
🍊三、解决跨域
🟢1.Jsonp实现跨域
jsonp的原理：动态创建<script>标签，而<script>的src属性是没有跨域限制的
- 前端创建script标记，设置src，添加到head中（你可以往body中添加）
- 后台返回一个js变量jsonp，这个jsonp就是请求后的JSON数据
- 回调完成后删除script标记（还有一些清理工作如避免部分浏览器内存泄露等）
<script type="text/javascript">function callback(data) {alert(data.message);}function addScriptTag(src){var script = document.createElement('script');script.src = src;document.body.appendChild(script);}window.onload = function(){addScriptTag("http://www.foo.com/js/outer.js");}
</script>🟢2.代理的方式
服务器A的test01.html页面想访问服务器B的后台action，返回“test”字符串，此时就出现跨域请求，浏览器控制台会出现报错提示，由于跨域是浏览器的同源策略造成的，对于服务器后台不存在该问题，可以在服务器A中添加一个代理action，在该action中完成对服务器B中action数据的请求，然后在返回到test01.html页面。
🟢3.CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段。
浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
btn.onclick = function(){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState == 4){if ((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){result.innerHTML = xhr.responseText;}else{alert("Request was unsuccessful: " + xhr.status);} }};xhr.open("post", "https://www.webhuochai.com/test/iecors.php", true);xhr.send(null);
}注意: CORS请求发送Cookie时，Access-Control-Allow-Origin只能是与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie
