1.使用jsonp的方法实现跨域:(json+动态的script)
script标签没有同源策略性问题,即可以采用script中的src属性来实现跨域,(一般使用动态生成script标签来引用外部js来解决跨域问题)
示例:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
function callback(data){
console.log(data);
}
</script>
<script src="http://www.test.com/01.ajax.php?fn=callback"></script>
</html>
php代码:
<?php
// echo 'I love you';
// 获取get方式的参数
$fn = $_GET['fn'];
echo $fn.'("我来自php跨域")';
?>
2.通过使用服务器跨域:
使用ajax结合php中header:
示例:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/**
* ajax
* @param options ajax 选项对象,对象结构如:{url, method, data, dataType, success, error}
* url: 请求资源的路径
* method:请求方法,默认为 GET
* data:对象,向服务端发送的数据,如:{username: 'admin', password: 'admin'}
* dataType:预期从服务端返回的数据格式,默认为 json
* success:函数,是请求成功后执行的回调函数,传递请求成功的数据作为参数,如:function(data) {}
* error:函数,是请求失败后执行的回调函数
*/
function ajax(options={}){
// 结构options中的属性
let {url,method="get",data,dataType="json",success,error}=options;
if (!url) {
throw new Error("ajax请求为提供url地址");
}
//处理用于向后端发送数据
let params=null;
if (data) {
// 临时在params中保存数组数据
params=[];
// 更新data对象中个属性,如:{name:"zhangsan"};
for(const key in data){
params.push(`${key}=${data[key]}`)
}
// 使用&字符对在params(data)中的每一个数据进行拼接
params=params.join("&");
}
// 判断是否为get请求方式并且存在向后头请求的数据
if (method==='GET' && params) {
// 查询字符串以 ? 号拼接在 URL 后
url=url+`?${params}`;
params=null;
}
// 创建请求
let xhr=new XMLHttpRequest();
// 打开设置请求方式地址
xhr.open(method,url,true);
// 设置请求头
xhr.setRequestHeader("Content-Type",'application/x-www-form-urlencoded');
// 发送请求
xhr.send(params);
// 响应处理
xhr.onreadystatechange=function(){
if (xhr.readyState==4) {//请求处理完毕,响应就绪
if (xhr.status==200) {//http状态码为200,时
let data=xhr.responseText;//获取响应数据
// 如果后端返回的json格式,则进行JSON.parse()转化
if (dataType==='json') {
data=JSON.parse(data);
}
// 数据逻辑处理
success && success(data);
}else{
error && error(xhr.status)//错误,返回传递http状态码
}
}
}
}
ajax({
url: 'http://www.test.com/02.kuayu2.php',
method: 'post',
data: { name: 'zs', age: 18 },
dataType: '',
success: (data) => {
console.log(data);
}, error: (data) => {
console.log(data);
}
})
</script>
</body>
</html>
php代码:
<?php
header('Access-Control-Allow-Origin: *');
$name=$_POST["name"];
$age=$_POST['age'];
echo "w我叫".$name."今年:".$age."++++++通过ajax结合header('Access-Control-Allow-Origin: *');跨域而来";
?>
通过header设置允许跨域:
方法一:
header("Access-Control-Allow-Origin: *");//允许所有地址跨域请求
//方式二:
header("Access-Control-Allow-Origin: http://localhost:8080");//指定某个地址可以跨域请求,这里只能指定一个
//方式三:如果要允许多个地址跨域请求可以这样写
$origin = ['http://localhost:8080','http://localhost:8081'];
if(in_array($_SERVER["HTTP_ORIGIN"],$origin))
{
$AllowOrigin = $_SERVER["HTTP_ORIGIN"];
}
header("Access-Control-Allow-Origin: ".$AllowOrigin );