浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法
由于同源策略的缘故，ajax不能向不同域的网站发出请求。
比如a站localhost需要向b站请求数据，地址为：http://www.walk-sing.com/api.php
请求的代码如下：
<html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$.get("http://www.walk-sing.com/api.php", function(data){
alert("Data Loaded: " + data);
});
</script>
<body>
</body>
</html>
访问该页面，页面空白，按F12打开控制台，可以看到截图所示信息：
解决方案1：jsonp
我们先来看这样一个例子：
<html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function alertSomething(data){
alert(data.name+data.age);
}
alertSomething(
{"name":"ben","age":24}
);
// $.get("http://www.walk-sing.com/api.php", function(data){
// alert("Data Loaded: " + data);
// });
</script>
<body>
</body>
</html>
执行结果：
我们也可以这样写：
<html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function alertSomething(data){
alert(data.name+data.age);
};
// $.get("http://www.walk-sing.com/api.php", function(data){
// alert("Data Loaded: " + data);
// });
</script>
<script type="text/javascript" src="alertsomething.js"></script>
<body>
</body>
</html>
alertsomething.js的内容如下：
alertSomething(
{"name":"ben","age":24}
);
也可以得到截图所示结果。
我们再换一个方式，将alertsomething.js上传到服务器，将代码改为如下形式：
<html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function alertSomething(data){
alert(data.name+data.age);
};
// $.get("http://www.walk-sing.com/api.php", function(data){
// alert("Data Loaded: " + data);
// });
</script>
<script type="text/javascript" src="http://www.walk-sing.com/alertsomething.js"></script>
<body>
</body>
</html>
也可以得到截图所示结果。
不知道大家发现没有，script标签没有同源策略的限制，jsonp正是基于此原理实现的。
jsonp的具体实现可参见如下代码：
jsonp.php
<?php
$method = isset($_GET['callback']) ? $_GET['callback'] : '';
if(!isset($method)){
exit('bad request');
}
$testArr = array(
'name' => 'ben',
'age' => 23
);
echo $method.'('.json_encode($testArr).')';
js代码：
<html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function alertSomething(data){
alert(data.name+data.age);
};
// $.get("http://www.walk-sing.com/api.php", function(data){
// alert("Data Loaded: " + data);
// });
</script>
<script type="text/javascript" src="http://www.walk-sing.com/jsonp.php?callback=alertSomething"></script>
<body>
</body>
</html>
也可以得到截图所示结果。
解决方案二：CORS（跨域资源共享，Cross-Origin Resource Sharing）
不知道大家发现了没有，jsonp只能发送get请求，而如果业务中需要用到post请求时，jsonp就无能为力了。
这时候cors（跨域资源共享，Cross-Origin Resource Sharing）就派上用处了。
CORS的原理：
CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
就拿前面第一个例子来说，我只要在api.php文件头加上如下一句话即可：
header('access-control-allow-origin:*');
再次请求该接口，结果如下截图所示：
以上所述是小编给大家介绍的jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
跨域资源共享 (CORS) 跨域资源共享（Cross-Origin Resource Sharing）允许WEB端的应用程序访问不属于本域的资源 配置格式 CORS配置为json字符串，类似 { "rules":[ { "id":"id1" "AllowOrigin":"http://*.example.com" //指定允许发送跨源请求的源，支持使用通配符
-
问题内容： 我对跨域JavaScript的概念有疑问。 有一个服务器（ex amazon.com），在其中只有选定的域可以使用其Web服务。所以可以肯定，如果我尝试从本地使用他们的服务，我将无法。我在控制台上得到了这个 跨域请求被阻止：“同源起源”策略禁止读取http://football20.myfantasyleague.com/2014/export?TYPE=rosters&L=52761
-
问题内容： Firefox存在一个长期存在的问题，即不加载与当前网页不同来源的字体。通常，在CDN上提供字体时会出现问题。 随着Amazon S3 CORS的推出，是否存在使用CORS解决Firefox中字体加载问题的解决方案？ 编辑：非常高兴看到S3 CORS配置的示例。 edit2：我找到了一个可行的解决方案，但实际上并没有理解它的作用。如果任何人都可以提供有关配置的更详细的解释以及亚马逊解释
-
问题内容： 我正在编写一个HTML5应用程序，该应用程序使用JSONP从几个不同的来源收集数据。我对GET所做的任何事情都可以正常工作。我现在正尝试发布数据，并且遇到了一个有趣的问题。我需要将数据从我的应用程序发布到另一个应用程序，该应用程序从本地计算机运行。我正在尝试编写具有跨平台功能的移动应用程序（请考虑使用Pulse / Flipboard），因此该代码将始终从本地源运行。我的思考过程如下：
-
问题内容： 我在本地局域网（machineA）上有一台具有两个Web服务器的计算机。第一个是XBMC中的内置端口（在端口8080上），并显示我们的库。第二台服务器是我用来根据需要触发文件转换的CherryPy python脚本（端口8081）。由XBMC服务器提供的页面上的AJAX POST请求触发文件转换。 转到显示库的http：// machineA：8080 显示图书馆 用户点击“转换”链接
-
编辑2：我已经找到了一个可行的解决方案，但没有真正理解它的作用。如果有人能提供关于配置的更详细的解释，以及在亚马逊对配置的解释中所发生的背景魔法，那将是非常感谢的，就像nzifnab提供的赏金一样。