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'); // 这句话可以不加