js跨域请求

js
js, source

跨域所出现的问题

跨域请求url返回json数据

先解决问题，再看原理

Demo:
我要请求一个获取当前本机登录的IP地址；跟据IP地址来判断登录所在的区域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 第一插入script标签。src就是搜狐IP地址的查询

<script src="http://pv.sohu.com/cityjson"></script>

/*
 *   这是我们想要的信息，是绝对地址要返回的数据。
 *   var returnCitySN = {"cip": "1.119.148.119", "cid": "CN", "cname": "CHINA"};
 */
 
//  这样就可以获取到数据；获取数据要根据页面返回的对象名字来获取。
    
//  注意：调用returnCitySN时要在script引用后。
<script>
	console.log( returnCitySN ); 
</script>

Demo2:
创建一个script标签；插入Dom中

1
2
3
4
5
6
7
8
9
10
11
var label = document.createElement("script");
label.src="http://pv.sohu.com/cityjson";
document.querySelector("body").appendChild(label);

//如果生成就调用 会获取不到
console.log(returnCitySN)

//这时候就会出现，现在生成的Dom才会渲染到Dom中
setTimeout(function(){
      console.log(returnCitySN)
},30)

1.导致跨域问题是因为同源策略问题。

什么是同源策略？同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议名protocol、主机host、端口号port”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

浏览器的同源策略会导致跨域，这里同源策略又分为以下两种

  1. DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
  2. XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

跨域解决方案:

  1. 通过jsonp跨域
  2. document.domain + iframe跨域
  3. location.hash + iframe
  4. window.name + iframe跨域
  5. postMessage跨域
  6. 跨域资源共享（CORS）

1. JSONP跨域

  1. 原生
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <script> 
       var label = document.createElement("script");
       label.type = 'text/javascript'; // 传参并指定回调执行函数为onBack 
       label.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';

       document.querySelector("body")appendChild(label); // 回调执行函数 

       function onBack(res) {
        alert(JSON.stringify(res)); 
       }
    </script>

服务端返回如下（返回时即执行全局函数）：

1
onBack({"status": true, "user": "admin"})

jsonp缺点：只能实现get一种请求

分享到