浏览器的同源策略_同源策略会限制 form 表单请求吗-CSDN博客

本文链接：https://blog.csdn.net/DcTbnk/article/details/105767861

一.定义

同源策略,只限制 ajax请求,不限制 超链接和form表单等跳转

浏览器对于ajax请求,有限制
如果 ajax请求的 url地址 与当前 地址
    请求协议不同
    url地址源不同   要求在同一个文件夹下,路径是相同的
    端口号不同
浏览器都视为 跨域请求 只能发送请求,但是不能获取响应体内容

如果不在同一个文件夹下,也会被视为不是同源文件
ajax请求会进行判断,判断是否有相同的文件夹结构
只要有相同的文件夹结构,就可以访问,获取请求内容

总结,同源策略,cookie和ajax请求的区别

1,为什么有同源策略
    为了防止数据的盗用和黑客的攻击
    浏览器默认只允许,同源的文件,访问数据,外部文件,不允许访问数据
    只能浏览页面,不能访问数据,获取响应体

2,cookie的同源策略
    创建的cookie只能是同一个文件夹中的文件或者子级文件
    共同使用这个设定的cookie
    父级文件夹中的文件,不会共享这个cookie
    实际项目中的cookie一般设定在顶级文件夹 / 根目录 中

3,ajax的同源的同源策略
    相对路径:
        只要可以通过相对路径访问的程序,一定有一个相同的文件夹,只要也在相同的盘符下
        浏览器允许ajax访问获取响应体
    绝对路径: url地址
        要求 请求协议   路径地址  端口号 都必须相同
        才会 认为是同源文件,才可以正常访问并且获取响应体

实际项目中,有大量的访问,是请求其他数据库中的文件内容
就要做跨域访问
跨域访问的方式有3种
    jsonp
    cors       
    proxy服务器代理  和cors没有本质上的区别

二.demo1.html

<body>
    <button>点击访问</button>
    <script src="../utils.js"></script>
    <script>
        // 当前这个文件在 demo 文件夹中
        // 要请求的 PHP文件 ajax1.php文件 在 demo文件夹外
        // 理论上应该是 非同源文件

        // 我们在请求时,可以请求成功过的
        // 因为是通过 ../ajax1.php 相对路径请求
        // 浏览器会认为两个文件在 同一个 week7_day05 文件夹中
        // 也会认为是同源文件,是可以发送请求的
        // 实际项目中,推荐写相对路径
        // 只要可以通过相对路径找到的文件,一定都一个相同的文件夹,只要也是有一个相同的盘符
        // 就会被认为是同源文件,就可以正常的发送ajax请求,并且获取响应体


        // 不同文件夹的文件,对 cookie 有影响
        // cookie 一定是同源的文件,才能共享cookie

        // 设定一个cookie
        mySetCookie('msg' , '我是dome1中的cookie' , 7*24*60*60);


        const oBtn = document.querySelector('button');

        oBtn.addEventListener('click', () => {

            const xhr = new XMLHttpRequest();

            xhr.open('get', '../ajax1.php');

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
                    console.log('请求成功');
                }
            }

            console.log(xhr);
        })

    </script>

二.demo2.html

<body>
    <h1>在同一个文件夹下的文件,可以有cookie,其他文件夹中的文件,不能有cookie</h1>
</body>

二.demo3.html

<body>
    <h1>同源策略演示</h1>
    <button>点击访问</button>
    <script src="./utils.js"></script>
    <script>
        // 通过ajax方式来请求访问PHP程序

        const oBtn = document.querySelector('button');

        oBtn.addEventListener('click', () => {

         
            const xhr = new XMLHttpRequest();
            // 相对路径的访问
            // xhr.open('get', './ajax1.php' );

            // 绝对路径的访问  URL地址
            // xhr.open('get', 'http://127.0.0.1/nz2002/week7_day05/ajax1.php' );

            // 绝对路径,从127.0.0.1改为localhost
            xhr.open('get', 'http://localhost/nz2002/week7_day05/ajax1.php' );

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
                    console.log('请求成功');
                }
            }

            console.log(xhr);
        })



        // 总结:
        // 1,ajax的同步设定
        //    open()第三个参数是false
        // 2,ajax的同步异步的区别
        //    监听判断要写在send()之前
        //    send()要写在所有程序最后
        // 3,实际项目中,绝对不会用同步形式


    </script>

二.demo4.html

<body>
    <h1>在父级空间下的html文件,建立cookie,子级文件夹中可以使用</h1>

    <script src="./utils.js"></script>
    <script>
        mySetCookie('father' , '我是父级文件夹中cookie' , 7*24*60*60);

    </script>
</body>

三.ajax1.php

<?php

echo '我是随便输出的内容,我就冒充响应体';

四.utils.js

function mySetCookie(key,value,time){
    const nowTime=new Date();
    let t=nowTime.getTime()-(8*60*60*1000)+(time*1000);
    nowTime.setTime(t);
    document.cookie=`${key}=${value};expires=${time == undefined ? '' : nowTime}`;
}

function myGetCookie(cookieStr){
    const arr=cookieStr.split('; ');
    const obj={};
    arr.forEach((val)=>{
        const nowArr=val.split('=');
        obj[nowArr[0]]=nowArr[1];
    });
    return obj;
}

function getAjaxSend(urlStr,cb){
    const xhr=new XMLHttpRequest();
    xhr.open('get',urlStr);
    xhr.send();
    xhr.onload=function(){
        cb(xhr.response);
    }
}

function postAjaxSend(url,func,dataStr){
    const xhr=new XMLHttpRequest();
    xhr.open('post',url);
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    xhr.send(dataStr);
    xhr.onload=function(){
        func(xhr.response);
    }
}