ajax实现跨域的方法

最新推荐文章于 2024-04-12 22:54:32 发布

很好。

最新推荐文章于 2024-04-12 22:54:32 发布

阅读量625

点赞数

分类专栏： js 文章标签： ajax javascript html

本文链接：https://blog.csdn.net/qq_52886072/article/details/120316288

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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 );

很好。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax实现跨域的方法

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-Compatibl
复制链接

扫一扫