AJAX同源策略

最新推荐文章于 2023-07-16 15:44:00 发布

林之.

最新推荐文章于 2023-07-16 15:44:00 发布

阅读量310

点赞数

分类专栏： ajax 文章标签：前端 ajax

本文链接：https://blog.csdn.net/m0_51144154/article/details/121503192

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

AJAX同源策略

1). server.js

//引入express框架
const express = require('express');

//创建express对象
const app = express();

//创建路由规则
app.get('/home', (request, response) => {
    
    //响应一个页面,这样会获取index.html中的数据
    response.sendFile(__dirname + '/index.html');
});

//创建一个路由规则 获取用户数据
app.get('/data', (request, response) => {
    response.send('用户数据');
});

//监听8000端口
app.listen(9000, () => {
    console.log('监视9000端口中...');
})

2). index.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>
    <h1>尚硅谷</h1>
    <button>点击获取用户数据</button>
</body>
<script>
    const btn = document.querySelector('button');

    btn.onclick = function(){
        //创建一个xhr
        const x = new XMLHttpRequest();

        //这里只写/data 是因为满足同源策略，所以url可以简写
        x.open("GET","/data");//给谁发

        //发送
        x.send();

        x.onreadystatechange = function(){
            if(x.readyState === 4){
          
                if(x.status >= 200 && x.status <300){
                    console.log(x.response)
                }
            }
        }

    }
</script>
</html>

3). 感想:
上面这个同源策略的案例就是利用，第一个get请求获取了 index.html 这个响应页面，从而获取了index.html中的说有数据到server.js的服务器页面（http://127.0.0.1:9000/home)。
然后在原服务器server.js再利用第二个 get 请求创建一个发送数据的路由规则，响应 index.html中button按钮。
所以 http://127.0.0.1:9000/home 中的内容和 index.html 浏览器中内容是一致的，而且点击button按钮会触发server服务器（这不就同源了吗，即响应页面和按钮请求同源）发送相关数据来

林之.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX同源策略

AJAX同源策略1). server.js//引入express框架const express = require('express');//创建express对象const app = express();//创建路由规则app.get('/home', (request, response) => { //响应一个页面,这样会获取index.html中的数据 response.sendFile(__dirname + '/index.html');})
复制链接

扫一扫