两种简单的跨域方法

  Ajax不能跨域,比如您是www.baidu.com,您就不能请求www.163.com的文件。但您可以请求www.baidu.com/1.jsonent.baidu.com/1.json这是因为安全原因,对于任何后台语言来说、服务器程序来说,所有的XHR类型的请求,如果来自其他的服务器,将不予应答

一、使用jsonp

  JSONP是JSON with Padding的略称。它是一个非官方的协议,出处不可考,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。--来源百度

  JSONP就像是JSON+Padding一样(Padding这里我们理解为调用函数时的填充)。

  

  绿色部分是JSON,外面的fun();是函数的调用,是padding补充部分。

  jsonp的原理很简单,就是把定义写在了HTML源文件里面,而将调用放在script标签引用的文件里面,由于script标签可以跨文件使用,这样就实现了跨域,引用的文件可以有各种格式php 、js、txt等。

下面举个例子:

jsonp.txt里面的内容如下:

//调用函数
fun({
	"result" : [
		{
			"name" : "小明",
			"age" : 12,
			"sex" : "男"
		},
		{
			"name" : "小红",
			"age" : 13,
			"sex" : "女"
		},
		{
			"name" : "小绿",
			"age" : 16,
			"sex" : "女"
		}
	]
});

运行结果:

  

由于这样使用起来不方便,我们可以将它封装成一个实用轮子:

jQuery已经有封装好的API可以直接使用:名称是ajax()

可以查看jQuery手册,参考如下

 

二、使用PHP偷数据 

几乎每种后台语言都可以实现该功能,以下是PHP的示例: 

<?php
	header("Content-Type:text/html;charset=utf-8");
	$a = file_get_contents("网址");
	print_r($a);
?>

其中,header是设置返回到浏览器中的头文件的字符集和文件类型

三、补充一点:

来自:Darren_聂微东 - 关注前端技术的博文:AJAX POST&跨域 解决方案 - CORS

  利用 CORS,http://www.test2.com 只需添加一个标头,就可以允许来自 http://www.test1.com 的请求,下图是我在PHP中的 hander() 设置,“*”号表示允许任何域向我们的服务端提交请求

     

  也可以设置指定的域名,如域名 http://www.test2.com ,那么就允许来自这个域名的请求

     
     
  当前我设置的header为“*”,任意一个请求过来之后服务端我们都可以进行处理&响应,那么在调试工具中可以看到其头信息设置,其中见红框中有一项信息是“Access-Control-Allow-Origin:* ”,表示我们已经启用CORS,如下图。
  PS:由于demo都在我厂的两台测试机间完成,外网也不能访问,所以在这就不提供demo了,见谅
     
   简单的一个header设置,一个支持跨域&POST请求的server就完成了:)
 
  当然,如果没有开启CORS必定失败的啦,如下图:
  

 

posted @ 2017-01-02 14:29  紫月凌枫  阅读(1310)  评论(2编辑  收藏  举报