常用的跨域方法

2017-07-19  本文已影响0人  曾祥辉

因为浏览器的同源策略保护机制,我们不能随意运行其他不同源下的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'//即可以实现降域
上一篇 下一篇

猜你喜欢

热点阅读