PHP AJAX跨域和跨域重定向问题以及HTML之间的数据通信

1、PHP AJAX跨域问题

       我在JS使用AJAX异步与PHP对接做一个页面的登录注册系统的时候就碰到了跨域问题（感觉这个问题很常见），先大致分析一下跨域问题产生的原因：当域名、端口、协议至少有一者不同时，则称两个页面不同源，而由于受同源政策的影响，它们之间的无法进行AJAX请求（cookie、localStorage也无法传递），我的PHP服务端的端口号是3000，而HTML通过Live Server的端口号是5500，二者端口不同，而导致跨域问题的产生。

        BUG信息如下

         网络上方法也是很多，但我觉得最有效最简单的方法就是在对应的.php文件的开头中加上一行代码：

header("Access-Control-Allow-Origin: *");

    其中的  *  表示任何域

关于更详细地介绍解决PHP跨域问题的此类方法可参照：PHP Ajax 跨域问题最佳解决方案 | 菜鸟教程 (runoob.com)https://www.runoob.com/w3cnote/php-ajax-cross-border.html

---

2、PHP AJAX跨域重定向问题

        这个问题发生在我通过前端的JS文件向PHP发来的AJAX请求进行更改数据库操作的时候，header之间发生的冲突。

        具体的bug信息如下

        这时候我的.php文件已经在开头声明了关于上一个问题的CORS头部，以下是关于该.php文件执行数据库操作的部分代码

    $add_user_sql = "INSERT INTO user_account_info VALUES (?, ?, ?)";
    $add_user_info_sql = "INSERT INTO user_info (uid, uname, avatar_type, avatar_data) VALUES (?, ?, ?, ?)";
    $stmt = mysqli_prepare($link, $add_user_sql);
    $stmt1 = mysqli_prepare($link, $add_user_info_sql);

    mysqli_stmt_bind_param($stmt, 'iss', $id, $user_name, $user_password);
    mysqli_stmt_bind_param($stmt1, 'isss', $id, $user_default_uname, $img_suffix, $dafault_avatar);

    // if ($user_name && $user_password) {
    $result = mysqli_stmt_execute($stmt);
    $result1 = mysqli_stmt_execute($stmt1);
    // echo json_encode($result1);
    if ($result && $result1) {
        $info = "注册成功";
    }
    // mysqli_close($link);

    if ($result) {
        header("Location:front_page.html");
    } else {
        exit('添加sql语句执行失败。错误信息：' . mysqli_error($link));
    // } else {
    //     echo "添加学生失败";
    //     // header('Refresh:3; url=front_page.html');
    }

        可以注意到我添加了一行代码（front_page.html是我自己创建的一个HTML页面），这行代码的意思是在当前页面打开front_page.html。

header("Location:front_page.html");

将这行代码注释掉，便发现BUG离奇地消失了。按我自己的理解来稍微分析一下： 

    我首先是在一个名为exchange_data.js的文件中通过new XMLHttpRequest()向add_user_info.php进行AJAX异步传输front_page.html页面的用户注册数据，此时由于是异步传输数据，exchange_data.js会在我设置的onload回调函数等待add_user_info.php传来的JSON数据，但同时AJAX请求已经被发送到add_user_info.php执行一系列操作，当执行到那一行header代码的时候，由于之前的exchange_data.js已经和add_user_info.php进行了跨域的定位，此时的连接并没有断开，因为在PHP文件中还未传送JSON数据返回JS文件，而此时二者之间又要因为另一个header而再次建立跨域连接，而产生了跨域重定向冲突的问题。

---

3、HTML之间的数据传输通信

        两个HTML页面要进行通信应该是开发当中经常会遇到的一个问题，我刚开始是尝试通过两个HTML同时连接同一个JS文件，再通过DOM进行内容显示，然后发现根本行不通，我猜测是由于两个HTML页面经常会有相同的id和class出现而不允许进行多个HTML连接同一个JS的操作。

        后来我发现现在很多网站都是使用cookie或者localStorage来进行不同HTML之间的数据通信，但需要注意的是这些HTML必须是同源的才能使用相同的cookie和localStorage。而且不同浏览器使用的cookie和localStorage也不相同，比如谷歌和edge。

        关于二者的优缺点比较网络上资料十分详尽，我就不在此赘述。

        对于如何在不同源的HTML页面进行数据通信可参考以下网站：

浏览器同源政策及其规避方法 - 阮一峰的网络日志 (ruanyifeng.com)http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html