【跨域请求（六）】server proxy（后端文件中转代理）《单向跨域》

最新推荐文章于 2023-04-04 00:02:10 发布

iuukai

最新推荐文章于 2023-04-04 00:02:10 发布

阅读量466

点赞数

分类专栏：跨域篇

本文链接：https://blog.csdn.net/weixin_45389633/article/details/110085134

版权

跨域篇专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、跨域获取 php 文件数据

a.html（http://aaa.com/a.html）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script>
		// ajax 向同域后端文件发出请求，接收数据
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://aaa.com/proxy.php?random=' + Math.random(), true);
		xhr.responseType = 'json';	// 返回 json 格式
		xhr.onreadystatechange = function() {
			if (this.readyState === 4) {
				if ((this.status >= 200 && this.status < 300)
				|| (this.status === 304)) {
					console.log(this.response);
				} else {
					console.log(new Error);
				}
			}
		}
		xhr.send(null);
	</script>
</body>
</html>

b.php（http://bbb.com/b.php）

<?php
	header('Content-type: application/json; charset=utf8');
	
	//json数据
	$json = array(
		'usernae' => '张三',
		'age' => '22',
		'domain' => 'http://bbb.com'
	);
	
	//输出json格式数据
	echo json_encode($json, JSON_UNESCAPED_UNICODE);
?>

proxy.php（http://aaa.com/proxy.php）【中转代理，后端无同源限制】

<?php
	// 跨域访问文件，打开并读取文件内容
	
	// 设置头信息
	header('Content-type: application/json; charset=utf8');
	
	// 跨域文件路径
	$crossUrl = 'http://bbb.com/b.php';
	
	// 以字符串形式读取文件内容【无同源限制】
	$str = file_get_contents($crossUrl);
	
	# file_get_contents得到的JSON数据是带有BOM的utf-8
	# 	通过 trim()移除由 chr(239).chr(187).chr(191) 拼接成的 utf-8 bom头即可
	
	//将获取到的字符串内容，转换成php数组,去除BOM
	$data = json_decode(trim($str,chr(239).chr(187).chr(191)),true);
	
	//输出json格式数据
	echo json_encode($data, JSON_UNESCAPED_UNICODE);
?>

二. 跨域获取 json 文件数据

a.html（http://aaa.com/a.html）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script>
		// ajax 向同域后端文件发出请求，接收数据
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://aaa.com/proxy.php?random=' + Math.random(), true);
		xhr.responseType = 'json';	// 返回 json 格式
		xhr.onreadystatechange = function() {
			if (this.readyState === 4) {
				if ((this.status >= 200 && this.status < 300)
				|| (this.status === 304)) {
					console.log(this.response);
				} else {
					console.log(new Error);
				}
			}
		}
		xhr.send(null);
	</script>
</body>
</html>

b.json（http://bbb.com/b.json）

{
	"name": "demo",
	"age": "*",
	"favorite_fruit": ["apple", "banana"],
	"domain": "http://bbb.com"
}

proxy.php（http://aaa.com/proxy.php）【中转代理，后端无同源限制】

<?php
	# 跨域访问文件，打开并读取文件内容
	
	// 设置头信息
	header('Content-type: application/json; charset=utf8');
	
	// 跨域文件路径
	$crossUrl = 'http://bbb.com/b.json';
	
	// 以字符串形式读取文件内容【无同源限制】
	$str = file_get_contents($crossUrl);
	
	# file_get_contents得到的JSON数据是带有BOM的utf-8
	# 	通过 trim()移除由 chr(239).chr(187).chr(191) 拼接成的 utf-8 bom头即可
	
	//将获取到的字符串内容，转换成php数组,去除BOM
	$data = json_decode(trim($str,chr(239).chr(187).chr(191)),true);
	
	//输出json格式数据
	echo json_encode($data, JSON_UNESCAPED_UNICODE);
?>

三. 使用 JQ 方法

1. $.ajax()

a.html（http://aaa.com/a.html）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
	<script>
		$.getJSON('http://aaa.com/proxy.php', 'random=' + Math.random(), function(retval, status, xhr) {
			console.log(retval);
		});
	</script>
</body>
</html>

2. $.getJSON()

a.html（http://aaa.com/a.html）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
	<script>
		$.ajax({
			type:"get",
			url:"http://aaa.com/proxy.php",
			async:true,
			data:{
				'random':Math.random()
			},
//			dataType:"json",	//可不指定，ajax会自动推测到json类型
			success:function(retval) {
				console.log(retval);
			}
		});
	</script>
</body>
</html>