解决Ajax跨域请求问题

向右看齐 2022-06-15 06:19 364阅读 0赞

--------------------

## 一、什么是跨域请求 ##

json作为系统间交互的手段，自然就伴随着众多ajax请求，随之而来的就是要解决 ajax的跨域问题。  
什么是跨域？  
简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。  
具体策略限制情况可看下表：

*  [http://www.a.com/a.js][http_www.a.com_a.js]和[http://www.a.com/b.js][http_www.a.com_b.js]在同一域名下，允许通信。
 *  [http://www.a.com/lab/a.js][http_www.a.com_lab_a.js]和[http://www.a.com/script/b.js][http_www.a.com_script_b.js]在同一域名下不同文件夹，允许通信。
 *  [http://www.a.com:8000/a.js][http_www.a.com_8000_a.js]和[http://www.a.com/b.js][http_www.a.com_b.js]是同一域名，不同端口，不允许通信。
 *  [http://www.a.com/a.js][http_www.a.com_a.js]和[https://www.a.com/b.js][https_www.a.com_b.js] 同一域名，不同协议，不允许通信。
 *  [http://www.a.com/a.js][http_www.a.com_a.js]和[http://127.0.0.100/b.js][http_127.0.0.100_b.js]一个域名，一个是域名对应的ip，不允许通信。
 *  [http://www.a.com/a.js][http_www.a.com_a.js]和[http://script.a.com/b.js][http_script.a.com_b.js]主域相同，子域不同，不允许通信。
 *  [http://www.a.com/a.js][http_www.a.com_a.js]和[http://a.com/b.js][http_a.com_b.js]同一域名，不同二级域名（同上），不允许通信。
 *  [http://www.a.com/a.js][http_www.a.com_a.js]和[http://www.b.com/b.js][http_www.b.com_b.js] 不同域名，不允许通信。

举个例子：为了复用，减少重复开发，单独开发了一个用户权限管理系统，共其他系统获取认证与授权信息，暂且称之为A系统；调用A系统以B为例。在B系统 中用ajax调用A系统系统的接口(数据格式为json)，在A系统中访问相应的url可正常回返json数据，但是在B系统中使用ajax请求同样的url则一点儿反应都没有，好像什么都没有发生一样。这可能是ajax跨域问题。

## 二、解决方案 ##

跨域的解决方案有多种，其中最常见的是使用同一服务器下的代理来获取远端数据，再通过ajax进行读取，而在这期间经过了两次请求过程，使得获取数据的效率大大降低，而解决跨域问题的一种比较通用的方案是使用JSONP。

*  什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

*  JSONP和JSON  
    比较一下json与jsonp格式的区别：  
    json格式：

{
        "message":"获取成功",
        "state":"1",
        "result":{"name":"工作组1","id":1,"description":"11"}
    }

jsonp格式：

callback({
        "message":"获取成功",
        "state":"1",
        "result":{
           "name":"工作组1","id":1,"description":"11"}
    })

jsonp比json外面有多了一层，callback()。

*  JSONP跨域的原理

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。  
举个例子，假如需要从服务器（[http://www.a.com/user?id=123][http_www.a.com_user_id_123]）获取的数据如下：

{"id": 123, "name" : 张三, "age": 17}

那么，使用JSONP方式请求（[http://www.a.com/user?id=123?callback=foo][http_www.a.com_user_id_123_callback_foo]）的数据将会是如下：

foo({
        "id": 123, "name" : 张三, "age": 17});

当然，如果服务端考虑得更加充分，返回的数据可能如下：

try{
        foo({
         "id": 123, "name" : 张三, "age": 17});}catch(e){}

这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为[http://www.a.com/user?id=123?callback=foo][http_www.a.com_user_id_123_callback_foo]：便可以使用foo函数来调用返回的数据了。

*  在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为’jsonp’：

$.ajax({
            dataType: 'jsonp',
            url: 'http://www.a.com/user?id=123',
            success: function(data){
        
                    //处理data数据
            }
    });

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
        
            //处理data数据
    });

也可以简单地使用getScript方法：

//此时也可以在函数外定义foo方法
    function foo(data){
        
            //处理data数据
    }
    $.getJSON('http://www.a.com/user?id=123&callback=foo');

值得注意有一个解决跨域问题的jQuery插件-jquery-jsonp。  
来看一下如何使用jquery-jsonp插件解决跨域问题吧。

*  JSONP的应用

JSONP在开放API中可以起到非常重要的作用，开放API是运用在开发者自己的应用上，而许多应用往往是在开发者的服务器上而不是在新浪微博的服务器上，因此跨域请求数据成为开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便做的非常好（虽然某些API里没有说明，但实际上是可以使用JSONP方式调用的）。

[http_www.a.com_a.js]: http://www.a.com/a.js
[http_www.a.com_b.js]: http://www.a.com/b.js
[http_www.a.com_lab_a.js]: http://www.a.com/lab/a.js
[http_www.a.com_script_b.js]: http://www.a.com/script/b.js
[http_www.a.com_8000_a.js]: http://www.a.com:8000/a.js
[https_www.a.com_b.js]: https://www.a.com/b.js
[http_127.0.0.100_b.js]: http://127.0.0.100/b.js
[http_script.a.com_b.js]: http://script.a.com/b.js
[http_a.com_b.js]: http://a.com/b.js
[http_www.b.com_b.js]: http://www.b.com/b.js
[http_www.a.com_user_id_123]: http://www.a.com/user?id=123
[http_www.a.com_user_id_123_callback_foo]: http://www.a.com/user?id=123?callback=foo