ajax关于同源

同源策略即协议，域名，端口号，必须完全相同。ajax默认遵循这一协议。违背这一策略即跨域。

因为单台服务器性能有限所以经常跨域

ajax同源案例网页URL和请求资源的URL一致响应设置本地HTML页面

const express=require('express');
const app=express();
app.get('/home',(request,response)=>{//该网页请求该网页的资源，所以同源
    response.sendFile(__dirname+'/ajaxtest.html');//_dirname表示该js文件所在绝对路径
});
app.get('/get',(request,response)=>{
    response.send('返回数据');//_dirname表示该js文件所在绝对路径
});
app.listen(9000,()=>{
    console.log('9000端口启动中')
})

1
2
3
4
5
6
7
8
9
10
11

返回的html页面，即用作同源链接

<body>
    <div>响应窗口</div>
    <button>获取返回数据</button>
    <script>
        const btn = document.querySelector('button');
        let odiv =document.querySelector('div');
        btn.onclick = function () {//该网页用作同源链接，
            // 注意必须用http.127.0.0的网页链接打开才算同源，右键打开不同源
            const xhr = new XMLHttpRequest();
            xhr.open('GET', '/get');//因为同源所以路径可以简写
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        odiv.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

编辑

上次更新: 2023/7/11 18:57:41

← ajax基础原生jsonp→