【ajax】11.同源策略

最新推荐文章于 2023-05-30 01:51:36 发布

绝不做九漏鱼

最新推荐文章于 2023-05-30 01:51:36 发布

阅读量200

点赞数

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

本文链接：https://blog.csdn.net/weixin_43210113/article/details/111187921

版权

ajax 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

〇、前情提要

在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。

参考：

我的笔记：
【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版）笔记
https://blog.csdn.net/weixin_43210113/article/details/110628389
b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版）
https://www.bilibili.com/video/BV1WC4y1b78y?p=2
笔记视频链接
链接：https://pan.baidu.com/s/1Wnwb42-AaqAlg6cQ0PRHwg
提取码：3waj
Node.js 中 __dirname 和 ./ 的区别
https://blog.csdn.net/zsensei/article/details/79094714
Mac下端口被占用的解决方式
https://blog.csdn.net/yeguxin/article/details/77718368

一、同源策略

步骤一

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>尚硅谷</h1>
</body>
</html>

server.js

const express = require('express');

const app = express();

app.get('/home', (request, response)=>{
    //响应一个页面
    response.sendFile(__dirname + '/index.html');
});

app.listen(9000, ()=>{
    console.log("服务已经启动...");
});

__dirname 知识补充：

参考：
Node.js 中 __dirname 和 ./ 的区别
https://blog.csdn.net/zsensei/article/details/79094714

Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径，所以当你在 /d1/d2/myscript.js 文件中写了 __dirname，它的值就是 /d1/d2 。

如果出现如下报错

events.js:xx
      throw er; // Unhandled 'error' event
      ^

在这里插入图片描述
请输入sudo lsof -i tcp:port，并kill PID

参考：
Mac下端口被占用的解决方式
https://blog.csdn.net/yeguxin/article/details/77718368

至此服务成功启动
在这里插入图片描述

进入`http://127.0.0.1:9000/home`

在这里插入图片描述

步骤二

点击按钮给9000发请求，满足同源策略。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>尚硅谷</h1>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.querySelector('button');

        btn.onclick = function(){
            const x = new XMLHttpRequest();
            //这里因为是满足同源策略的, 所以 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>
</body>
</html>

server.js

const express = require('express');

const app = express();

app.get('/home', (request, response)=>{
    //响应一个页面
    response.sendFile(__dirname + '/index.html');
});

app.get('/data', (request, response)=>{
    response.send('用户数据');
});

app.listen(9000, ()=>{
    console.log("服务已经启动...");
});

进入`http://127.0.0.1:9000/home`

在这里插入图片描述

绝不做九漏鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【ajax】11.同源策略

〇、前情提要在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。参考：我的笔记：【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版）笔记https://blog.csdn.net/weixin_43210113/article/details/110628389b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版
复制链接

扫一扫