笔记-跨域方式实现原理

websocket
Websocket是HTML5的一个持久化的协议,它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议,都基于 TCP 协议。但是 WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时,WebSocket 在建立连接时需要借助 HTTP 协议,连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
原生WebSocket API使用起来不太方便,我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。
我们先来看个例子:本地文件socket.html向localhost:3000发生数据和接受数据

// socket.html
<script>let socket = new WebSocket('ws://localhost:3000');socket.onopen = function () {socket.send('我爱你');//向服务器发送数据}socket.onmessage = function (e) {console.log(e.data);//接收服务器返回的数据}
</script>
// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//记得安装ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {ws.on('message', function (data) {console.log(data);ws.send('我不爱你')});
})

Node中间件代理(两次跨域)
实现原理:同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略。
代理服务器,需要做以下几个步骤:

接受客户端请求 。
将请求 转发给服务器。
拿到服务器 响应 数据。
将 响应 转发给客户端。

在这里插入图片描述我们先来看个例子:本地文件index.html文件,通过代理服务器http://localhost:3000向目标服务器http://localhost:4000请求数据。

// index.html(http://127.0.0.1:5500)

<script>$.ajax({url: 'http://localhost:3000',type: 'post',data: { name: 'xiamen', password: '123456' },contentType: 'application/json;charset=utf-8',success: function(result) {console.log(result) // {"title":"fontend","password":"123456"}},error: function(msg) {console.log(msg)}})</script>
// server1.js 代理服务器(http://localhost:3000)
const http = require('http')
// 第一步:接受客户端请求
const server = http.createServer((request, response) => {// 代理服务器,直接和浏览器直接交互,需要设置CORS 的首部字段response.writeHead(200, {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Methods': '*','Access-Control-Allow-Headers': 'Content-Type'})// 第二步:将请求转发给服务器const proxyRequest = http.request({host: '127.0.0.1',port: 4000,url: '/',method: request.method,headers: request.headers},serverResponse => {// 第三步:收到服务器的响应var body = ''serverResponse.on('data', chunk => {body += chunk})serverResponse.on('end', () => {console.log('The data is ' + body)// 第四步:将响应结果转发给浏览器response.end(body)})}).end()
})
server.listen(3000, () => {console.log('The proxyServer is running at http://localhost:3000')
})
// server2.js(http://localhost:4000)
const http = require('http')
const data = { title: 'fontend', password: '123456' }
const server = http.createServer((request, response) => {if (request.url === '/') {response.end(JSON.stringify(data))}
})
server.listen(4000, () => {console.log('The server is running at http://localhost:4000')
})

上述代码经过两次跨域,值得注意的是浏览器向代理服务器发送请求,也遵循同源策略,最后在index.html文件打印出{“title”:“fontend”,“password”:“123456”}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/11295.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

51-50 两万字长文解读ControlNet论文和代码,以及自定义模型训练和图片精确控制生成实验

今天咱们来看 ICCV2023 最佳论文Adding Conditional Control to Text-to-Image Diffusion Models&#xff0c;又称为ControlNet。提到图像生成Finetuning工程方法&#xff0c;有Textual inversion、DreamBooth、LoRA、T2I-Adapter以及ControlNet&#xff0c;其中最著名的当属Co…

Jupyter配置

一、修改Jupyter打开界面 &#xff08;1&#xff09;打开【Anaconda Prompt】&#xff0c;输入【jupyter notebook --generate-config】命令 从运行结果可知【jupyter_notebook_config.py】的位置 &#xff08;2&#xff09;使用【记事本】打开 找到# c.NotebookApp.noteb…

同城预约上门服务家政小程序

基于Thinkphp和原生微信小程序开发的一款同城预约、上门服务、到店核销家政系统&#xff0c;用户端、服务端、门店端各端相互依赖又相互独立&#xff0c;支持选择项目、选择服务人员、选择门店多种下单方式&#xff0c;支持上门服务和到店核销两种服务方式&#xff0c;支持自营…

瞬息全宇宙——平行宇宙终极教程,手把手教你做出百万点赞视频

最近一种叫“瞬息全宇宙”的视频火了&#xff0c;抖音一期视频百万赞&#xff0c;各个博主视频都在带瞬息全宇宙这个标签&#xff0c;于是就有很多朋友催我出教程了&#xff0c;在琢磨了几天之后&#xff0c;终于整出来了 教程包含了插件的安装&#xff0c;界面的讲解&#xff…

C语言 | Leetcode C语言题解之第80题删除有序数组中的重复项II

题目&#xff1a; 题解&#xff1a; int removeDuplicates(int* nums, int numsSize) {if (numsSize < 2) {return numsSize;}int slow 2, fast 2;while (fast < numsSize) {if (nums[slow - 2] ! nums[fast]) {nums[slow] nums[fast];slow;}fast;}return slow; }

python微信小程序 django+uniapp民宿房屋租赁短租系统

本课题主要基于微信小程序的民宿短租系统的设计&#xff0c;实现了在微信小程序里的民宿房屋的管理系统&#xff0c;系统将房屋信息发布&#xff0c;房屋租赁等功能集于一身&#xff0c;为热爱旅游的用户提供了多种多样的房屋租赁业务&#xff0c;同时也方便了房屋的拥有者发布…

问题解决记录 | 内存溢出

报错截图&#xff1a; 处理方式&#xff1a; 增大PDI工具的内存 打开Spoon.bat配置文件 修改配置

第六节笔记及作业----Lagent AgentLego 智能体应用搭建

关于 Agent 的相关理论 大语言模型存在一些局限性&#xff0c;比如会出现幻觉问题、有时效性问题以及可靠性问题。智能体的定义是具备感知、决策和行动能力的实体。智能体主要由感知部分、大脑部分和动作部分组成。智能体有多种类型&#xff0c;如 ReAct 类型&#xff08;侧重…

落地领域大模型应知必会 (1) :主要微调方法总览

在如今高速发展的人工智能领域&#xff0c;高效地利用大语言模型&#xff08;LLMs&#xff09;已经变得越来越重要。但是&#xff0c;利用大语言模型的方式太多了&#xff0c;如果你才刚刚开始接触它&#xff0c;可能会感到不知所措。 实质上&#xff0c;我们可以通过两种主要…

Github 2024-05-09 Go开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-09统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Go项目10Gin Web框架:高性能的Go HTTP框架 创建周期:3496 天开发语言:Go协议类型:MIT LicenseStar数量:73548 个Fork数量:7831 次关注人数…

信创应用软件之国产邮箱

信创应用软件之国产邮箱 文章目录 信创应用软件之国产邮箱采用信创邮箱的必要性信创邮箱采购需求国产邮箱业务形态国产邮箱代表性品牌CoremailRichmail安宁eyouUMail拓波 邮件安全的发展阶段 采用信创邮箱的必要性 邮箱是天然的数据存储空间&#xff0c;党政和央国企客户在使用…

软件3班20240513

java.util.PropertyResourceBundle4554617c package com.yanyu;import java.sql.*; import java.util.ResourceBundle;public class JDBCTest01 {public static void main(String[] args) throws SQLException { // 获取属性配置文件ResourceBundle bundle Res…

高效文件管理:一键批量修改文件名,并统一转换为大写扩展名

在现代社会中&#xff0c;无论是个人还是企业&#xff0c;我们都需要处理大量的文件。有效的文件管理不仅能提高我们的工作效率&#xff0c;还能确保数据的完整性和安全性。其中&#xff0c;批量修改文件名和扩展名是一种常用的文件管理方式&#xff0c;本文将详细介绍云炫文件…

[已解决]Linux挂载新硬盘到已有目录下(CentOS7)

首先总结下用到的命令&#xff1a; fdisk -l mount / unmountdf -hT / df -lhmkfs -t ext4 / mkfs -t ext3cp -amv aaa bbb 具体步骤&#xff1a; 挂载物理硬盘/虚拟硬盘到linux主机或者linux虚拟主机上&#xff1b;fdisk -l查看是否成功挂载&#xff1b; fdisk /dev/sdc 初…

【Qt】之【CMake】Error : The source.. does not match the soused

QT中cmak编译出现CMake Error: The source… does not match the soused 分析 前提是该项目是从另一个路径的项目复制过来的&#xff0c;编写代码时发现无论怎样修改代码&#xff0c;运行后都没有任何变化&#xff0c;以为是qtbug&#xff0c;重构重启都没用&#xff0c;最后…

websevere服务器从零搭建到上线(三)|IO多路复用小总结和服务器的基础框架

文章目录 epollselect和poll的优缺点epoll的原理以及优势epoll 好的网络服务器设计Reactor模型图解Reactor muduo库的Multiple Reactors模型 epoll select和poll的优缺点 1、单个进程能够监视的文件描述符的数量存在最大限制&#xff0c;通常是1024&#xff0c;当然可以更改数…

Spring底层入门(十一)

1、条件装配 在上一篇中&#xff0c;我们介绍了Spring&#xff0c;Spring MVC常见类的自动装配&#xff0c;在源码中可见许多以Conditional...开头的注解&#xff1a; Conditional 注解是Spring 框架提供的一种条件化装配的机制&#xff0c;它可以根据特定的条件来控制 Bean 的…

什么是分库分表

读写分离主要应对的是数据库读并发&#xff0c;没有解决数据库存储问题。试想一下&#xff1a;如果 MySQL 一张表的数据量过大怎么办? 答案当然是分库分表 什么是分库&#xff1f; 分库 就是将数据库中的数据分散到不同的数据库上&#xff0c;可以垂直分库&#xff0c;也可…

windows通过sftp对Linux服务器进行上传下载

前言 通过简单高效的方式可以在没有远程连接软件的情况下对服务器进行上传下载。 方法 Windows下打开cmd命令行&#xff0c;输入sftp 用户名IP 上传下载命令 #上传文件&#xff0c;如果需要上传文件夹则 put -r 文件路径 上传到路径 sftp> put E:\clash-verge_1.6.2_a…

把3D模型加载到网页上需要什么技术?

要将3D模型加载到网页上并实现交互展示需求&#xff08;比如点击模型弹出一个窗口或控制模型的材质等&#xff09;&#xff0c;可以使用以下几种技术&#xff1a; 1、Three.js&#xff1a;这是一个非常流行的JavaScript库&#xff0c;用于在网页上渲染和显示3D图形。它支持多种…