Ajax请求跨域问题

问题：打开html文件使用Ajax访问本地php文件时，显示错误

Cross origin requests are only supported for protocol schemes: http, data,chrome-extension, https, chrome-extension-resource.

分析：浏览器为了安全性考虑，默认对跨域访问禁止。

解决：给浏览器传入启动参数（allow-file-access-from-files），允许跨域访问。

Windows下，运行（CMD+R）或建立快捷方式：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

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

补充知识：什么是跨域访问

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：

http://www.123.com/index.html 调用 http://www.123.com/server.PHP （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

解决办法：

1、JSONP：

使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。

2、代理：

例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

3、PHP端修改header（XHR2方式）

在php接口脚本中加入以下两句即可：

header('Access-Control-Allow-Origin:*');//允许所有来源访问

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

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

1、什么是JSONP？

 

要了解JSONP，不得不提一下JSON，那么什么是JSON ？

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

 

2、JSONP有什么用？

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

 

3、如何使用JSONP？

下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

 

HTML代码 （任一 ）：

 

Html代码  

1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
2. <script type="text/javascript">  
3.     function jsonpCallback(result) {  
4.         //alert(result);  
5.         for(var i in result) {  
6.             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
7.         }  
8.     }  
9.     var JSONP=document.createElement("script");  
10.     JSONP.type="text/javascript";  
11.     JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";  
12.     document.getElementsByTagName("head")[0].appendChild(JSONP);  
13. </script>  

 

或者

 

Html代码  

1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
2. <script type="text/javascript">  
3.     function jsonpCallback(result) {  
4.         alert(result.a);  
5.         alert(result.b);  
6.         alert(result.c);  
7.         for(var i in result) {  
8.             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
9.         }  
10.     }  
11. </script>  
12. <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>  

 

JavaScript的链接，必须在function的下面。

 

服务端PHP代码 （services.php）：

 

Php代码  

1. <?php  
2.   
3. //服务端返回JSON数据  
4. $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
5. $result=json_encode($arr);  
6. //echo $_GET['callback'].'("Hello,World!")';  
7. //echo $_GET['callback']."($result)";  
8. //动态执行回调函数  
9. $callback=$_GET['callback'];  
10. echo $callback."($result)";