跨域访问是什么
同源策略
1995年，同源政策由Netscape公司引人浏览器。目前，所有刘览器都实行这个政策。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。随着互联网的发展，“同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制:
-
Cookie、LocalStorage和lndexDB无法读取 -
DOM无法获得 -
AJAX请求不能发送
虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。
所谓“同源”指的是“三个相同”:协议相同、域名相同以及端口相同。
域名是什么
跨域是什么
当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨越HTTP请求。
处于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和FetchAPI遵循同源策略。这意味着使用这些API的web应用程序直能从加载应用程序的同一个域请求HTTP资源。
常见跨域分为以下两种:
- 完全跨域：就是只一个顶级域名方向另一个顶级域名。
- 跨子域：相同顶级域名下的两个子级域名相互通信。
跨域分为两种：常见跨域，JSONP
常见跨域
HTML页面中一些允许指定路径的元素具有跨域特性:
-
<link>元素 -
<script>元素 -
<img>元素 -
<iframe>元素
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css"rel="stylesheet">
<img src="http://c.hiphotos.baidu.com/image/pic/item/b58f8c5494eef23e9edfe9925bc317d26.jpg">
JSONP是什么
JSONP ( JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据
访问的问题。
利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模
式就是所谓的JSONP。
<script>元素实现
网页通过添加一个
function addScriptTag(src) {var script = document.createElement('script');script,setAttribute("type","text/javascript");script.src = src;document,body.appendChild(script);
}
window.onload = function () {addScriptTag('http://127.0.0.1:3000?callback=foo');
}
function foo(data) {console.log('Your public IP address is: ' + data,ip);
}
$.getJSON()方法
jQuery中的$.get. JSON()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据。
$.getJSON("http://127.0.0.1:3000?callback=?,function(data){console.log(data);
});
注意: $.get JSON()方法的第一个参 数表示url,需要在该参数后面添加“callback=?” 。jQuery将
“?”自动替换为正确的函数名，以执行回调函数。
网页通过添加一个
function addScriptTag(src) {var script = document.createElement('script');script,setAttribute("type","text/javascript");script.src = src;document,body.appendChild(script);
}
window.onload = function () {addScriptTag('http://127.0.0.1:3000?callback=foo');
}
function foo(data) {console.log('Your public IP address is: ' + data,ip);
}
$.getJSON()方法
jQuery中的$.get. JSON()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据。
$.getJSON("http://127.0.0.1:3000?callback=?,function(data){console.log(data);
});
注意: $.get JSON()方法的第一个参 数表示url,需要在该参数后面添加“callback=?” 。jQuery将
“?”自动替换为正确的函数名，以执行回调函数。
