因为浏览器的同源策略保护机制，我们不能随意运行其他不同源下的js脚本，当我们需要跨域运行js脚本时可以使用以下方法绕过同源策略：
1. JSONP
jsonp跨域的原理：
jsonp跨域的原理：
在html页面上有三种资源是可以与页面本身不同源的。分别是：js脚本，css样式文件，图片，如下所示，所以它们是可以链接访问到不同源的资源的。
1）<script type="text/javascript" src="url" ></script>
2）<link type="text/css" rel="stylesheet" href="url" />
3）而jsonp就是利用了<script>标签可以链接到不同源的js脚本，来到达跨域目的。当链接的资源到达浏览器时，浏览器会根据他们的类型来采取不同的处理方式，比如，如果是css文件，则会进行对页面 repaint，如果是img 则会将图片渲染出来，如果是script 脚本，则会进行执行，比如我们在页面引入了jquery库，利用页面上 script 标签可以跨域，并且其 src 指定的js脚本到达浏览器会执行的特性，我们可以进行跨域取得JSON格式的数据。
例子：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JSONP</title>
</head>
<body>
<div class="ct">
<button id="btn">获取天气</button>
<ul>
<li class="city">城市</li>
<li class="date">日期</li>
<li class="weather">天气</li>
</ul>
</div>
</body>
<script>function getWeather(json) {
$('.city').text('城市:' + json.result.currentcity)
$('.date').text('日期：' + json.date)
$('.weather').text('天气：' + json.result.weather)
}
$('#btn').on('click', function () {
var script = document.createElement('script');
script.src = 'http://api.jirengu.com/weather.php?callback=getWeather';
document.body.appendChild(script);
document.body.removeChild(script)
})
</script>
</html>
2. CORS
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式。
当XMLHttpRequest 发送请求时，浏览器会检查Access-Control-Allow-Origin的值，只要后台在返回数据时，将请求头的值赋成我们需要的域名（Access-Control-Allow-Origin：‘url’），浏览器将会将数据发送给请求方。
在后台添加一句：
res.header("Access-Control-Allow-Origin","url")
3. 降域
当我们需要将一个大域名下多个子域名的脚本同时运行时，可以将不同子域名降到同一级域名，即可以绕过同源策略，例：
主域名：www.jrg.com
子域名a：a.jrg.com
子域名b：b.jrg.com
在a.html和b.html的js中加一句
document.domain = 'jrg.com'//即可以实现降域
网友评论