JS 中的跨域请求

Posted 2020-09-09 doctype

跨域请求并不仅仅只是 Ajax 的跨域请求，而是对于一个页面来说，只要它请求了其他域名的资源了，那么这个过程就属于跨域请求了。

比如，一个带有其他域名的 src 的 <img> 标签，以及页面中引入的其他第三方的 CSS 样式等。

对于 img 以及 CSS 而言，跨域请求本身并没有更多的安全问题，因为这些请求都属于只读请求，并不会对源资源造成副作用。

而如果跨域请求是从脚本里面发出去的，由于脚本具有高度灵活性，浏览器出于安全考虑，会根据同源策略来限制它的功能，使得正常情况下，脚本只能请求同源的资源。

如果页面确实需要通过脚本请求其他网站的资源，那么就应当在跨域资源共享的机制下工作。

同源策略

对于两个页面（资源）而言，只要他们满足以下三个条件则称他们符合同源策略：

1. 协议相同

2. 端口相同

3. 域名相同

可以通过JS 设置 document.domain 来通过同源策略。如：

在子域 http://a.example.com/test.html 的页面中，通过 JS 设置 document.domain=‘example.com‘ ，则当前页面与 http://example.com/page.html 符合同源策略。

简单的说，对于页面 http://www.example.com/page1.html 来说，以下页面与它都不符合同源策略，脚本无法直接请求这些资源：

• https://www.example.com/page1.html : 协议不同

• http://www.example.com:81/page1.html : 端口不同

• http://another.example.com/page1.html : 域名不同

如果用的是jquery的话 可以用jsonp解决跨域

 $.ajax({  
        url:"http://crossdomain.com/services.php",  
        dataType:‘jsonp‘,  
        data:‘‘,  
        jsonp:‘callback‘,  
        success:function(result) {  
            for(var i in result) {  
                alert(i+":"+result[i]);//循环输出
            }  
        }
    });  

 $.get(‘http://crossdomain.com/services.php?callback=?‘, 
{name: encodeURIComponent(‘tester‘)},
 function (json) { 
    for(var i in json) {
        alert(i+":"+json[i]);
    } 
}, ‘jsonp‘); 

Jsonp原理

原理就是创建一个<script>元素，地址指向第三方的API网址，形如：
<script src="http://www.example.net/api?param1=1&param2=2"></script>
并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），

形如： callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。