第 4 章：跨域

于 2024-09-10 11:42:13 发布
阅读量431 收藏 10
点赞数 13
分类专栏： AJAX 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2203_75300307/article/details/142007214
版权

第 4 章：跨域

1. 同源策略

  • 同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
  • 同源： 协议、域名、端口号 必须完全相同。
  • 违背同源策略就是跨域。
  • 满足同略策略url可以简写

1.1 同略策略案例

  • index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>666</h1>
    <button>点击获取用户数据</button>

    <script>
        // 获取元素对象
        const btn = document.querySelector('button');

        // 绑定键盘按下事件
        btn.onclick = function () {

            // 1. 创建对象
            const x = new XMLHttpRequest();

            // 2. 初始化 设置类型 与URL
            // 这里是因为是满足同源策略的，所以url可以简写
            x.open('GET', '/data');
            // 3. 发送
            x.send();
            // 4. 事件绑定
            x.onreadystatechange = function () {
                // 判断
                if (x.readyState === 4) {
                    // 判断状态码
                    if (x.status >= 200 && x.status < 300) {
                        // 处理服务端返回的结果
                        console.log(x.response);
                    }
                }
            }
        }
    </script>


</body>
</html>
  • server3. js
// 引入express模块
const express = require('express')

// 创建web服务器
const app = express()

// 3. 创建路由规则

app.get('/home', (request, response) => {
  // 设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')
  // 设置响应体
  response.sendFile(__dirname + '/index.html');
})

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

// 监听端口启动服务器
app.listen(9000, () => {
  console.log('服务器启动成功~，9000端口监听中...')

})

2. 如何解决跨域

2.1 JSONP

  1. JSONP 是什么
    JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。
  2. JSONP 怎么工作的？
  • 在网页有一些标签天生具有跨域能力，比如：img link iframe script。
  • JSONP 就是利用 script 标签的跨域能力来发送请求的。
2.1.1 JSONP 的使用

1.动态的创建一个 script 标签
var script = document.createElement("script");
2.设置 script 的 src，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
	alert(data.name);
};

3.将 script 添加到 body 中
document.body.appendChild(script);
4.服务器中路由的处理

router.get("/testAJAX" , function (req , res) {
	console.log("收到请求");
	var callback = req.query.callback;
	var obj = {
		name:"孙悟空", age:18
	}
	res.send(callback+"("+JSON.stringify(obj)+")");
});
  1. 原理.html
    利用script标签去向服务端发送请求
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsonp 原理</title>
</head>
<body>
    <div id="result"></div>
    <script>
        // 处理数据
        function handle(data) {
            // 获取result 元素
            const result = document.getElementById('result');
            // 处理数据
            result.innerHTML = data.name;
        }
    </script>
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>
  1. server.js
// 1. 引入express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// jsonp服务
app.all('/jsonp-server', (request, response) => {
  const data = {
    name: 'zhangsan'
  };
  // 将数据转化为字符串
  let str = JSON.stringify(data);
  // 返回结果
  response.end(`handle(${str})`);

});

// 4. 监听端口启动服务
app.listen(8000, () => {
  console.log('服务已经启动, 8000 端口监听中....');
});
2.1.2 原生 JSONP 的实践
  • 需求：在input框输入用户名，鼠标丧失焦点后向服务端发送请求对用户名是否存在的一个检测，服务端直接返回一个已存在，直接返回一个不允许使用，然后把input框的颜色变为红色
  1. jsonp实践.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsonp 实践</title>
</head>
<body>
    用户名：<input type="text" id="username">
    <p></p>
    <script>
        // 获取input 元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');

        // 声明 handle 函数
        function handle(data) {
            // 修改input框颜色
            input.style.backgroundColor ='solid 1px #f00';
            // 修改 p 标签的提示文本
            p.innerHTML = data.msg;

        }

        // 绑定事件
        input.onblur = function () {
            // 获取用户的输入值
            let username = this.value;
            // 向服务端发送请求 检测用户名是否存在
            // 1. 创建 script 对象
            const script = document.createElement('script');
            // 2. 设置属性
            script.src = 'http://127.0.0.1:8000/check-username'
            // 3. 插入到页面中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>
  1. server.js
// 1. 引入express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// 用户名检测是否存在
app.all('/check-username', (request, response) => {
  const data = {
    exists: 1,
    msg: '用户名已存在'
  };
  // 将数据转化为字符串
  let str = JSON.stringify(data);
  // 返回结果
  response.end(`handle(${str})`);
});



// 4. 监听端口启动服务
app.listen(8000, () => {
  console.log('服务已经启动, 8000 端口监听中....');
});
  1. handle这个函数已经在全局作用域对象下声明了，此时借助script标签向服务端发送请求，返回结果是一个handle函数的调用，浏览器解析器一看能执行没有问题，于是解析执行代码，并且处理数据，这样子我们就实现了跨域。
    在这里插入图片描述
2.1.3 jQuery 中的 JSONP
  • 需求：点击按钮，向8000端口发送请求，返回的结果在div里面做一个呈现
  • callback参数这里是固定写法
  1. jQuery-jsonp.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery-jsonp 案例</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: solid 1px #089;
        }
    </style>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result"></div>
    <script>
        $('button').eq(0).click(function () {
            // 这里的callback是固定写法
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data) {
                $('#result').html(`
                    名称：${data.name}<br>
                    校区：${data.city}
                `)
            })
        });
    </script>
</body>
</html>
  1. server.js
// 1. 引入express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// jquery-jsonp
app.all('/jquery-jsonp-server', (request, response) => {
  const data = {
    name: 'zhangsan',
    city:['北京','上海','广州']
  };
  // 将数据转化为字符串
  let str = JSON.stringify(data);
  // 接收 callback 参数
  let cb = request.query.callback;
  // 返回结果
  response.end(`${cb}(${str})`);

});

// 4. 监听端口启动服务
app.listen(8000, () => {
  console.log('服务已经启动, 8000 端口监听中....');
});

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/613b0b06d8b24224b368606f9d3ccb95.png

2.2 CORS

  1. CORS 是什么？
    CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

  2. CORS 怎么工作的？
    CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
    以后就会对响应放行。

  3. 主要是服务器端的设置：

// 设置响应头  设置允许跨域
  // * 表示允许客户端发送请求时发送任意的请求头信息
  response.setHeader('Access-Control-Allow-Origin', '*');   // 源
  response.setHeader('Access-Control-Allow-Headers', '*');  // 头信息
  response.setHeader('Access-Control-Allow-Method', '*');   // 方法
2.2.1 CORS 实践
  • 需求：点击按钮，向8000端口发送请求，返回的结果在div里面做一个呈现
  1. CORS.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cors</title>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: solid 1px red;
        }
    </style>
</head>

<body>
    <button>发送请求</button>
    <div id="result"></div>

    <script>
        const btn = document.querySelector('button');
        const div1 = document.querySelector('div');
        btn.onclick = function () {
            // 1. 创建 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化设置
            xhr.open('GET', 'http://127.0.0.1:8000/cors-server');
            // 3. 发送请求
            xhr.send();
            // 4. 绑定事件
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 输出响应体
                    console.log(xhr.response);
                    div1.innerHTML = xhr.response;
                }
            }
        }
    </script>
</body>
</html>
  1. server.js
// 1. 引入express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// cors
app.all('/cors-server', (request, response) => {
  // 设置响应头  设置允许跨域
  // * 表示允许客户端发送请求时发送任意的请求头信息
  response.setHeader('Access-Control-Allow-Origin', '*');   // 源
  response.setHeader('Access-Control-Allow-Headers', '*');  // 头信息
  response.setHeader('Access-Control-Allow-Method', '*');   // 方法
  // 设置响应体
  response.send('Hello CORS');
})

// 4. 监听端口启动服务
app.listen(8000, () => {
  console.log('服务已经启动, 8000 端口监听中....');
});
Muko_0x7d2
关注
  • 13
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第七章跨域攻击及防御
willow_liang的博客
12-29 2911
第七章跨域攻击及防御 很多大型企业都拥有自己的内网，一般通过域林进行共享资源。根握不同职能区分的部门，从逻辑上以主域和子域进行划分，方便统一管理。在物理层，通常使用防火墙将哥哥子公司及各个部门划分为不同的区域。攻击者如果得到了某个子公司或者某个部门 的域控制器权限,但没有得到整个公司的内网全部权限，往往会想办法获取其他部门或者域的权限。因此,在部署网络边界时，,如果能了解攻击者是如何对现有网络讲行跨域攻击的，就可以更安全地部署内网还我、更有效地防范攻击行为。 7.1跨域攻击方法分析 常规..
第 4 章：Vue 中的 ajax
学过的东西，讲不出来等于没学。
12-02 567
学习资料来自尚硅谷VUE教学视频 课件、代码、资料 vscode插件推荐 章节导航： Vue学习笔记 第一章（上） Vue学习笔记 第一章（下） 第 4 章：Vue 中的 ajax4.1. vue脚手架配置代理4.1.1 方法一4.1.2 方法二4.2. vue 项目中常用的 2 个 Ajax 库：axios4.3. vue 项目中常用的 2 个 Ajax 库：vue-resource4.4. 插槽 4.1. vue脚手架配置代理 跨域： 同源策略：所谓同源是指域名（127.0.0.1），协议（http）
第 1 章：原生 AJAX
2203_75300307的博客
09-05 708
XML （Extensible Markup Language）可扩展标记语言。XML 被设计用来传输和存储数据。XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。比如说我有一个学生数据：name = “孙悟空”;age = 18;gender = “男”;
第六章 跨域问题
lrqforest的博客
11-11 127
什么是跨域： 跨域是指跨域名的访问，一下情况都属于跨域： 跨域原因说明 示例 域名不同 www.jd.com和 www.taobao.com 域名相同，端口不同 www.jd.com:8080与www.jd.com:8081 二级域名不同 item.jd.com 与 miaosha.jd.com 2.为什么有跨域问题？ 跨域不一定会有跨域问题。 因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这.
第 2 章：AJAX 的使用
2203_75300307的博客
09-05 1192
AJAX 的所有操作都是通过该对象进行的。
第二十五章：SpringBoot添加支持CORS跨域访问
恒宇少年De成长之路
04-25 900
CORS（Cross-Origin Resource Sharing）”跨域资源共享”，是一个W3C标准，它允许浏览器向跨域服务器发送Ajax请求，打破了Ajax只能访问本站内的资源限制，CORS在很多地方都有被使用，微信支付的JS支付就是通过JS向微信服务器发送跨域请求。开放Ajax访问可被跨域访问的服务器大大减少了后台开发的工作，前后台工作也可以得到很好的明确以及分工，下面我们就看讲一下如何让...
第五章 跨域资源共享（CORS）：现代Web开发中的关键机制
球球不吃虾WHR2349博客
01-10 974
在现代Web开发中，不同源之间数据交换的需求日益增长。然而，出于安全原因，浏览器对从一个域向另一个域发起请求有着严格的限制，这就是同源策略(Same-Origin Policy)。然而，同源策略限制了后端访问接口必须与网站一致！这就非常不灵活，尤其现在web应用多为多端应用，共用一个服务的情况下。（这里是重点）为了解决这一问题，并实现安全、灵活的跨域通信，跨域资源共享(Cross-Origin Resource Sharing, 简称CORS)应运而生。
第十二章：会话控制
weixin_49794837的博客
06-18 1116
所谓会话控制就是对会话进行控制HTTP 是一种无状态的协议，它没有办法区分多次的请求是否来自于同一个客户端，无法区分用户而产品中又大量存在的这样的需求，所以我们需要通过**会话控制**来解决该问题cookiesessiontoken。
第一章：Spring流程执行步骤
beiback的博客
11-18 1164
Spring流程执行步骤
高级JSON表单规范第4章：选项小部件
04-08
本章内容主要分为以下几个部分： 1. **选项小部件的定义**： 选项小部件通常指的是下拉框、复选框或单选按钮等，它们允许用户在一组预设的选项中进行选择。在JSON表单规范中，这些小部件通过特定的JSON结构来定义...
开发和调试神器：跨域代理工具解决跨域问题
跨域问题是前端开发中常见的难题之一，特别是在Web开发中，由于浏览器的同源策略限制，不同源之间的通信会受到限制，导致跨域问题的出现。本章将介绍跨域问题的概念、对开发和调试带来的挑战以及现有解决跨域问题的...
H2FA R-CNN: 跨域弱监督目标检测的整体和层次特征对齐
14329H2FA R-CNN：跨域弱监督目标检测的整体和层次特征对齐徐云秋1，2*孙一凡1杨宗欣3苗嘉旭3杨毅31百度研究2ReLER，AAII，悉尼科技大学3CCAI，浙江大学imyunqiuxu@gmail.comsunyf15@tsinghua.org.cn{yangzongxin，...
NestedVAE：跨域自适应编码器反映共享属性的方法
9202Enc（x）µjσjzjDec（z）NestedVAE：通过弱监督隔离共同因素Matthew J.元音m.j. surrey.ac.uk内卡蒂·吉汉·卡姆戈兹n. surrey.ac.uk理查德·鲍登r. surrey.ac.uk萨里大学视觉、语音和信号处理中心英国吉尔福德...
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 525
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
最新发布
qq_39969848的博客
09-09 684
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
weixin_52479803的博客
09-05 682
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
el-popover弹框自定义位置
weixin_47218354的博客
09-05 353
【代码】el-popover弹框自定义位置。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1030
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值