分类目录

链接

友情链接

统计信息

  • 日志总数:114篇
  • 评论总数:185条
  • 分类总数:11个
  • 标签总数:391个
  • 友情链接:0个
  • 网站运行:3177天

2019年八月
« 3月    
 1234
567891011
12131415161718
19202122232425
262728293031  
>
现在位置:    首页 > javascript, php/mysql > 正文

javascript 异域问题的两种解决方法之jsonp & access-control-allow-origin

javascript, php/mysql 暂无评论

javascript  从A站点请求B站点资源的时候  POST  GET  是可以进行请求 的,但AJAX 通过 异步请求的时候,会报异域的错误

下面提供两种解决方法 来解决异步的问题:

先看一下服务器端B站点的:ajax.php 非常的简单

<?php
	//因为我们在设置header是不允许 有任何提示输出 的所以设置 一下报错级别
	error_reporting(E_ERROR);
	//使用 jsonP 响应的方法 
	if($_REQUEST["method"] == "jsonp"){

		//因为我们在jquery.Ajax请求中 的dataType 使用了 JSONP 输出的内容会直接被认作是JAVASCRIPT代码 执行
		echo "alert('来自jsonp')";


	}else{
		//通过 设置 header 通知 浏览 不进行同源安全处理
		//通过 测试 IE其实并没有兼容这种方式 所以 移动端可以安全使用此方法
		//PC 端 不建议使用。。
		header("Access-control-allow-origin:*");
		echo " 通过 设置 setting access-control-allow-origin:*";

	}


?>

再看一下A站点发送请求的代码:demo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>javascript 解决同源问题</title>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script>
			function jsonp(){

					$.ajax({
						url:"http://www.b.com/ajax.php?method=jsonp",
						dataType:"JSONP",
						
						});
			}

			function headerSetting(){

				$.get("http://www.b.com/ajax.php",function(data){

						alert(data);

				})


			}

	</script>
</head>
<body>
	
	方法 1 , 使用jquery $.ajax  中的dataType = "jsonp"
	<br />
	<input type="button" name="jsonp" value="发送请求" onclick="jsonp()" />
	<br />

	方法 2, 在header 中设置   header("Access-control-allow-origin:*");

	<input type="button" name="header" value="发送请求" onclick="headerSetting()" />



</body>
</html>

注:

方法一,JSONP

当然 JSONP的原理是很简单的,异域问题 不会发生在文件请求,比如:iframe image   script等标签,都不会 有异域问题。这个就是JSONP实现 的原理,你在A站点请求页面中 请求的处理方法 ,当我们使用script标签的时候,请求响应回来的内容都会当是JAVASCRIPT来执行。这就是实现 的窍门。

当然,现在我们都使用JQUery来进行发送异步请求了。

方法二,

通过 设置 header 通知 浏览 不进行同源安全处理
通过 测试 IE其实并没有兼容这种方式 所以 移动端可以安全使用此方法

本文版权归企业网站建设,做网站,网站建设,php网站建设,dedecms建站,ecshop二次开发,html空间,网站修改所有,转载引用请完整注明以下信息:
本文作者:admin
本文地址:javascript 异域问题的两种解决方法之jsonp & access-control-allow-origin | 企业网站建设,做网站,网站建设,php网站建设,dedecms建站,ecshop二次开发,html空间,网站修改

抱歉!评论已关闭.