想要了解跨域,首先需要模拟出跨域的环境.
跨域?: 协议,端口号,子域名,主域名只要其中有一个不一样的.比如a.com和b.com互相调用,这就会发生跨域问题,
根本原因:同源策略(出于安全考虑)
跨域环境准备:
非常简单的跨域环境:
比如:http://localhost:80/
和 http://127.0.0.1:80/
localhost:80和127.0.0.1:80看上去是同一个,但是域名不同,也算是跨域的,可以根据这个简单地了解跨域
比较复杂点的跨域环境准备:
wampserver下创建多站点.我使用HBuilder配置php编写环境(这个只需要在创建好的站点下分别创建web项目,然后指定外置web服务器到你的站点下就可以--有点简单粗暴,).
wampserver不太好弄,安装的过程容易遇到各种问题.推荐慕课网的php入门基础中老师详细介绍的wampserver环境配置(目前发现的讲得条理清晰详细的一个教程),耐心一步步跟着做,可能因为版本不同也会出现一些小问题,但是都能百度各种大海捞针解决的.
1.比较简单地跨域 xhr2(html5新推出的)
当前html访问路径: http://test01.com/test01_php/index.html
想要访问的:demo.php访问路径:http://test02.com/php/demo.php
可以看到,这两个文件并不是同源的,就会产生跨域问题
index.html
<!DOCTYPE > <html> <head> <meta charset="utf-8" /> <title>跨域测试</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn").click(function() { $.ajax({ /**/ url: 'http://test02.com/php/demo.php', type: 'GET', success: function(data) { $(text).html(data); } }); }); }); </script> </head> <body> <input id="btn" type="button" value="获取跨域数据" /> <textarea id="text" style="width: 400px; height: 100px;"></textarea> </body> </html>
demo.php(php中没有写什么,只返回了一个"hello")
<?php header("Content-Type:application/txt;charset=utf-8"); /*header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Methods:POST,GET");*/ echo "hello"; ?>
点击获取跨域信息 :
控制台报错,没有权限访问(当然,什么都没有返回,):
把demo,php中的注释去掉
demo.php
<?php header("content-type:application/json"); $jsonp = $_GET['callback']; $json_data ='{"name":"网站","age":4}'; echo $jsonp."(".$json_data.")"; ?>点击获取跨域数据:
可以看到能够实现
http://test01.com/test01_php/index.html
和 http://test01.com/php/demo.php 不同域之间地访问了.
关键的地方:
header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Methods:POST,GET");不过这个还允许通配符* :允许所有不同域的请求并访问demo.php,(你家什么人都能进,权限容易出现滥用,那得多危险,);
2.还有一种方法是后端做一个代理,前台不需要处理.(目前没接触)
3.JSONP(getjson下)
demo3.html(訪問路徑 : http://test01.com/test01_php/demo3.html)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 实例</title> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <div id="divCustomers"> </div> <button id="btn">确定</button> <script> $(function() { $("#btn").on("click", function() { $.getJSON("http://test02.com/php/demo2.php?callback=?", function(data) { var html = ""; for (x in data) { html += x+":"+data[x]+"<br>"; } $('#divCustomers').html(html); }); }) }) </script> </body> </html>
demo2.php(访问路径: http://test02.com/php/demo2.php)
<?php header("content-type:application/json"); $jsonp = $_GET['callback']; $json_data ='{"name":"网站","age":4}'; echo $jsonp."(".$json_data.")"; ?>
可以看到能够正确地渲染出不同域下返回的数据
JSONP是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来处理返回的数据.
json格式:
{"name":"网站","age":4}
jsonp格式:
callback({"name":"网站","age":4})/*callback就是传递过去的参数,这里把它当作函数使用*/
JSONP(ajax下)
demo.html(访问路径:http://test01.com/test01_php/demo.html)<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery.min.js"></script> <script> $(function() { $("button").on("click", function() { $.ajax({ type: "GET", url: "http://test02.com/php/demo3.php?callback=?", async: true, dataType: 'jsonp', success: function(data) { $("span").html(data.name); } }); }) }) </script> </head> <body> <button>确定</button> <span></span> </body> </html>
demo3.php(访问路径:http://test02.com/php/demo3.php)
<?php header("content-type:application/json"); $jsonp = $_GET['callback']; $json_data ='{"name":"汪星人","age":50}'; echo $jsonp."(".$json_data.")"; ?>如下图:
查看访问状态:
还有一些跨域的方法,后面遇到在写,理解跨域,处理跨域并不难.学习跨域最佳的方法:动手实践!!动手实践!!