跨域实验范例-1 （从域名domain1.com跨域到域名domain2.com上的请求访问）

最新推荐文章于 2022-03-30 16:23:08 发布

zhengzizhi

最新推荐文章于 2022-03-30 16:23:08 发布

阅读量716

点赞数

分类专栏：跨域请求访问

本文链接：https://blog.csdn.net/zhengzizhi/article/details/78935467

版权

跨域请求访问专栏收录该内容

1 篇文章 0 订阅

订阅专栏

[root@contoso ~]# cat >> /etc/hosts
192.168.10.20   domain1.com
192.168.10.20   domain2.com

[root@contoso ~]# cat >> /etc/httpd/conf.d/httpd-vhosts.conf
<Directory "/home/myth/www/site1">
        Options +Indexes +FollowSymLinks
        Order allow,deny
        Allow from all
        AllowOverride All
        Require all granted
</Directory>

<VirtualHost *:80>
    ServerAdmin zhengzizhi@126.com
    DocumentRoot "/home/myth/www/site1"
    ServerName domain1.com
    ServerAlias domain1.com
    ErrorLog "/home/myth/log/httpd/domain1-com-error_log"
    CustomLog "/home/myth/log/httpd/domain1-com-access_log" common
</VirtualHost>
<Directory "/home/myth/www/site2">
        Options +Indexes +FollowSymLinks
        Order allow,deny
        Allow from all
        AllowOverride All
        Require all granted
</Directory>

<VirtualHost *:80>
    ServerAdmin zhengzizhi@126.com
    DocumentRoot "/home/myth/www/site2"
    ServerName domain2.com
    ServerAlias domain2.com
    ErrorLog "/home/myth/log/httpd/domain2-com-error_log"
    CustomLog "/home/myth/log/httpd/domain2-com-access_log" common
</VirtualHost>

[root@contoso ~]# systemctl restart httpd && httpd -S

/home/myth/www/site1/index.html

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="user"></div>
    </body>

    <script type="text/javascript">
        var url = "http://domain2.com/index.php";
        $.get(url, null, function (data) {
            $(".user").text("name:" + data.name + " gender:" + data.gender);
        }, "json");
    </script>
</html>

/home/myth/www/site2/index.php

<?php

//CORS Demo 1 : 跨域实验
$data = array(
    'name' => 'Jack',
    'gender' => 'Male'
);
//以下被注释掉的代码块是跨域请求的正确实现代码，首先请关注跨域请求时抛出的错误信息：
//已拦截跨源请求：同源策略禁止读取位于 http://domain2.com/index.php 的远程资源。
//（原因：CORS 头缺少 'Access-Control-Allow-Origin'）
/*
//HTTP_ORIGIN是请求头中的信息，在浏览器中直接展示为Origin
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
//此处是允许跨域的白名单
$allow_origin = array(
    'http://domain1.com',
    'http://domain2.com'
);
//判断当前Origin来源是否在白名单内，是的话就允许设置一套三式Header头让他跨域
if (in_array($origin, $allow_origin)) {
    //关键点跨域三式
    header('Access-Control-Allow-Origin:' . $origin); //允许的域名
    header('Access-Control-Allow-Methods:GET'); //允许的方法
    header('Access-Control-Allow-Headers:X-Requested-With, Content-Type, Accept'); //服务器支持的头信息
}*/
echo json_encode($data);
?>

开始直接访问提供数据的网站site2

在FireFox浏览器地址栏里输入GET请求地址：http://domain2.com/index.php

从网站site1上去访问另外一个网站site2上提供的数据，就会立刻出现跨域请求访问的错误：

为了能从网站site1上正确实现能够跨域访问网站site2上的数据，

我们必须取消跨域请求代码块的注释/home/myth/www/site2/index.php代码如下：

<?php

//CORS Demo 1 : 跨域实验
$data = array(
    'name' => 'Jack',
    'gender' => 'Male'
);
//以下被注释掉的代码块是跨域请求的正确实现代码，首先请关注跨域请求时抛出的错误信息：
//已拦截跨源请求：同源策略禁止读取位于 http://domain2.com/index.php 的远程资源。
//（原因：CORS 头缺少 'Access-Control-Allow-Origin'）
//HTTP_ORIGIN是请求头中的信息，在浏览器中直接展示为Origin
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
//此处是允许跨域的白名单
$allow_origin = array(
    'http://domain1.com',
    'http://domain2.com'
);
//判断当前Origin来源是否在白名单内，是的话就允许设置一套三式Header头让他跨域
if (in_array($origin, $allow_origin)) {
    //关键点跨域三式
    header('Access-Control-Allow-Origin:' . $origin); //允许的域名
    header('Access-Control-Allow-Methods:GET'); //允许的方法
    header('Access-Control-Allow-Headers:X-Requested-With, Content-Type, Accept'); //服务器支持的头信息
}
echo json_encode($data);
?>

在FireFox浏览器地址栏里输入GET请求地址：http://domain1.com/index.html,此页面里的jquery $.get方法请求就属于从域名domain1.com跨域到域名domain2.com上的请求访问

/home/myth/www/site1/index.html

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    </head>
    <body>
        <p id="user"></p>
        <button type="button" id="cors">send cors</button>
    </body>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#cors").click(function (e) {
                $.ajax({
                    url: "http://domain2.com/index.php",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    data: {"id": "999", "status": true}, //发送参数
                    async: true,
                    crossDomain: true,
                    xhrFields: {withCredentials: true},
                    //beforeSend: function (xhr) {
                    //    document.cookie = 'token=iv9ilrgr9g3tn4sgb7l0343dn7;domain=domain2.com;path=/';
                    //},
                    success: function (data) {
                        $("#user").text(" id = " + data.id + ", name = " + data.name + ", gender = " + data.gender + ", cookie = " + data.cookie + ", status = " + data.status);
                    }
                });
            })
        });

    </script>
</html>
/home/myth/www/site2/index.php
<?php

if (!isset($_COOKIE['token'])) {
    setcookie('token', session_create_id(), time() + 30);
}
//CORS Demo 1 : 跨域实验
$data = array(
    'id' => $_POST['id'],
    'name' => 'Jack',
    'gender' => 'Male',
    'cookie' => $_COOKIE['token'],
    'status' => $_POST['status']
);
//以下被注释掉的代码块是跨域请求的正确实现代码，首先请关注跨域请求时抛出的错误信息：
//已拦截跨源请求：同源策略禁止读取位于 http://domain2.com/index.php 的远程资源。
//（原因：CORS 头缺少 'Access-Control-Allow-Origin'）
//HTTP_ORIGIN是请求头中的信息，在浏览器中直接展示为Origin
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
//此处是允许跨域的白名单
$allow_origin = array(
    'http://domain1.com',
    'http://domain2.com'
);
//判断当前Origin来源是否在白名单内，是的话就允许设置一套三式Header头让他跨域
if (in_array($origin, $allow_origin)) {
    //关键点跨域三式
    header('Access-Control-Allow-Origin:' . $origin); //允许的域名
    header('Access-Control-Allow-Methods:POST,OPTIONS'); //允许的方法
    header('Access-Control-Allow-Headers:X-Requested-With, Content-Type, Accept'); //服务器支持的头信息
    header('Access-Control-Allow-Credentials:true');
    header('Access-Controll-Max-Age:1728000');
    header('Content-type: application/json');
}
echo json_encode($data);
?>