JavaScript 跨域的实现方法

JavaScript 跨域的解决方案

1、参考资料: 
(1) jquery + jsonp: 
 a. JSONP只能使用GET方式，不能使用POST方式。
 b. JSONP可以修改http headers ，将用户自定义的字段加入到请求头。 [$.ajax]

 http://www.cnblogs.com/2050/p/3191744.html 
 https://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/

 It is not possible to make a JSONP POST request. 
 JSONP works by creating a <script> tag that executes Javascript from a different domain;  
 it is not possible to send a POST request using a <script> tag.   
 <script> inclusion can only trigger a GET.

(2) Cross-Origin Resource Sharing (CORS): 
 a. CORS 方法可以使用GET或POST方式、可以修改headers ，将用户自定义的字段加入到请求头中。
 b. 实现过程需要修改服务器资源文件的配置。
 
 http://stackoverflow.com/questions/3860111/how-to-make-a-jsonp-post-request-that-specifies-contenttype-with-jquery  
 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 
 https://cnodejs.org/topic/519c234863e9f8a542aa7ebd

备注: 推荐采用 JSONP、CORS、HTML5的postMessage, 具体方案需要根据具体问题(情况)讨论来确定.  
 
2、具体方案的实现过程:  
(1) JSONP 的方案: 简述实现过程  
a. 浏览器: test.js   // 请求的方式只能是 GET

$.getJSON("URL&callback=?",function(jsonData) {
    var data = JSON.parse(jsonData);
  });

 b. 或者采用 $.ajax 的方式：

$.ajax({
   headers: {
       'Content-Type':'application/json',        

   },
   type:'GET',
   url: URL,
   data: {name:'string'},
   dataType: 'jsonp',
   jsonp: 'callback',      //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) 
   jsonpCallback:'feedBackState', //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
   success:function(result){
    console.log(result);
   }
  });

c. 服务器 Server: 最后的输出必须采用如下方式: 
  $.getJSON 方式: 服务器使用 PHP 

 echo $_GET['callback'] . '(' . $jsonData . ');';

  $.ajax 方式:服务器使用 PHP 

$jsonp = $_REQUEST["callback"]; 
$str = '[{"id":"1","name":"test1"},{"id":"2","name":"test2"}]'; 
$str = $jsonp . "(" . $str . ")"; 
echo $str; 

(2) Cross-Origin Resource Sharing (CORS) 实现过程: 
a. 浏览器请求: test.js  

$.ajax({
   headers: {
    'Content-Type':'application/json'
   },
   url: URL,  
   type: 'POST',         // 请求的方式 
   crossDomain: true,    // 请求服务器允许跨域,目前大部分浏览器都支持
   processData: false,   // 发送原生的数据 
   data: jsonDatas,         
   dataType: 'json',     // 指定传递数据的类型 json      
   success:function(result){
    alert(JSON.stringify(result)); 
    // 如果返回的数据格式是json的字符串类型的, 需要使用函数 JSON.parse 对其解析转化成json数据对象  
    // 如果返回的数据格式本身就是 json, 那么就可以直接使用该JSON数据,不需要解析转化 
   },
   error:function(xhr,status,error){
    alert(status);
   }
  });

b. 服务器 Server: put this lines in your server side file: 
  if PHP：

header('Access-Control-Allow-Origin: *');      // 允许跨域请求  
  header('Access-Control-Allow-Methods: POST');  // 允许使用 POST 请求 
  header('Access-Control-Max-Age: 1000');        // 这句话可以不加