笔记-跨域方式实现原理

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; }

Nginx线程池源码刨析

Nginx线程池源码刨析 相关的API int thread_mutex_create (pthread_mutex_t *mtx); int thread_mutex_destroy (pthread_mutex_t *mtx); int thread_mutex_lock (pthread_mutex_t *mtx); int thread_mutex_unlock (pthread_mutex_t *mtx); …

「PHP系列」PHP AJAX RSS 阅读器

文章目录 一、AJAX RSS 阅读器1. HTML结构 (index.html)2. PHP处理RSS (rss_fetcher.php)注意事项&#xff1a; 二、AJAX RSS 阅读器运用步骤 1: 设置HTML页面步骤 2: 编写PHP脚本 (rss_fetcher.php)步骤 3: 配置服务器步骤 4: 测试额外提示&#xff1a; 三、相关链接 一、AJAX…

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 次关注人数…

项目经理必须要学会使用原型图工具或者别的必要工具吗

项目经理不一定必须学会使用原型图工具或其他特定技术工具&#xff0c;但熟悉和掌握一些关键工具和技术无疑会提高他们的工作效率和项目管理能力。以下是关于项目经理是否需要学习使用原型图工具或其他必要工具的几点考虑&#xff1a; 项目需求&#xff1a; 如果项目涉及产品设…

信创应用软件之国产邮箱

信创应用软件之国产邮箱 文章目录 信创应用软件之国产邮箱采用信创邮箱的必要性信创邮箱采购需求国产邮箱业务形态国产邮箱代表性品牌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;本文将详细介绍云炫文件…

双亲委派模型的重要性与作用

1、安全性 双亲委派模型确保了Java核心类库的类型安全。因为所有的类加载请求最终都会传递给顶层的启动类加载器&#xff08;Bootstrap ClassLoader&#xff09;&#xff0c;它负责加载Java的核心类库。这意味着任何自定义的类加载器都不可能加载一个与Java核心类库中的类同名…

[已解决]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 初…

牛客周赛 Round 38VP

1.签到&#xff1a;https://ac.nowcoder.com/acm/contest/78292/A AC代码&#xff1a; #include<bits/stdc.h> using namespace std; int x; int main(){cin>>x;int wx%10;if(w0) cout<<0;else cout<<10-w; } 2.签到&#xff1a;https://ac.nowcode…

通过flask搭建,简单的网站,实现注册登录效果,初步了解搭建网页的基本架构。

网站架构了解 通过flask搭建&#xff0c;简单的网站&#xff0c;实现注册登录效果&#xff0c;初步了解搭建网页的基本架构。 前提准备 html在开发中最主要的一些标签知识flask中自带的接收信息给后台的语法 1&#xff09;html基础标签的使用 <h1>用于强调文本内容&…