当前位置: 首页 > news >正文

前端的8种跨域解决方案

在前端开发中,常见的跨域解决方案有以下8种:

  1. JSONP(JSON with Padding):利用<script>标签的跨域特性,通过动态创建<script>标签,请求一个带有回调函数的接口,服务器返回的数据会作为回调函数的参数传入,从而实现跨域请求。
function jsonp(url, callback) {const script = document.createElement('script');script.src = url + '?callback=' + callback;document.body.appendChild(script);
}jsonp('http://api.example.com/data', 'handleResponse');
function handleResponse(data) {console.log(data);
}
  1. CORS(Cross-Origin Resource Sharing):通过服务器设置响应头,允许指定的源(域名、协议、端口)进行跨域请求。
// 服务器响应头设置
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type// 前端请求
fetch('http://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.log(error));
  1. 反向代理:在服务器端设置一个代理服务器,将前端的请求发送到目标服务器,并将目标服务器的响应返回给前端,从而实现跨域请求。
// 服务器端代理
app.use('/api', proxy({ target: 'http://api.example.com', changeOrigin: true }));// 前端请求
fetch('/api/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.log(error));
  1. WebSocket:使用WebSocket协议进行跨域通信,WebSocket协议默认支持跨域请求。
const socket = new WebSocket('ws://api.example.com');
socket.onmessage = function(event) {console.log(event.data);
};
  1. postMessage:通过window.postMessage方法在不同窗口之间进行跨域通信,可以实现跨域数据传递和消息通知。
// 窗口A发送消息
window.postMessage('Hello', 'http://example.com');// 窗口B接收消息
window.addEventListener('message', function(event) {if (event.origin === 'http://example.com') {console.log(event.data);}
});
  1. WebSocket + CORS:结合WebSocket和CORS,使用WebSocket建立跨域连接,然后通过CORS发送HTTP请求。
const socket = new WebSocket('ws://api.example.com');
socket.onopen = function() {socket.send('GET /data HTTP/1.1\r\nHost: api.example.com\r\n\r\n');
};
socket.onmessage = function(event) {console.log(event.data);
};
  1. Nginx反向代理:通过Nginx服务器设置反向代理,将前端的请求转发到目标服务器,从而实现跨域请求。
location /api {proxy_pass http://api.example.com;
}
  1. WebRTC:使用WebRTC技术进行跨域通信,可以实现点对点的音视频传输和数据传输。

使用场景:

  1. JSONP:

    • 优点:兼容性好,支持老版本浏览器;简单易用,无需特殊的配置。
    • 缺点:只支持GET请求;存在安全风险,容易受到XSS攻击;只能发送JSON格式的数据。
    • 使用场景:适用于简单的跨域请求,且对安全性要求不高的情况。
  2. CORS:

    • 优点:支持所有类型的HTTP请求;安全性较高,可以通过设置请求头进行控制;不需要特殊的前端代码。
    • 缺点:需要服务器端设置响应头,对于一些没有权限修改响应头的情况无法使用。
    • 使用场景:适用于需要进行复杂跨域请求的情况,且对安全性要求较高。
  3. 反向代理:

    • 优点:适用于所有类型的HTTP请求;不需要特殊的前端代码;可以在服务器端进行请求的处理和过滤。
    • 缺点:需要服务器端设置代理服务器,增加了服务器的负担和复杂度。
    • 使用场景:适用于需要在服务器端进行请求处理或过滤的情况,或者无法修改响应头的情况。
  4. WebSocket:

    • 优点:支持实时通信,可以进行双向通信;跨域限制较少。
    • 缺点:需要服务器端支持WebSocket协议;不适用于传输大量数据。
    • 使用场景:适用于实时通信或需要双向通信的场景,如聊天室、实时数据监控等。
  5. postMessage:

    • 优点:简单易用,无需特殊的配置;支持跨窗口通信。
    • 缺点:只能进行点对点的通信,无法广播消息;需要在接收端进行安全验证。
    • 使用场景:适用于不同窗口之间的通信,如父子窗口、跨域iframe等。
  6. WebSocket + CORS:

    • 优点:结合了WebSocket和CORS的优点,支持实时通信和复杂跨域请求。
    • 缺点:需要服务器端同时支持WebSocket和CORS。
    • 使用场景:适用于需要实时通信和复杂跨域请求的情况。
  7. Nginx反向代理:

    • 优点:支持所有类型的HTTP请求;可以在Nginx服务器上进行请求处理和过滤。
    • 缺点:需要在服务器端配置Nginx服务器,增加了服务器的负担和复杂度。
    • 使用场景:适用于需要在服务器端进行请求处理或过滤的情况,或者无法修改响应头的情况。
  8. WebRTC:

    • 优点:支持点对点的音视频传输和数据传输;跨域限制较少。
    • 缺点:需要浏览器和服务器端同时支持WebRTC协议;配置和使用较为复杂。
    • 使用场景:适用于需要进行实时音视频传输或数据传输的场景,如视频会议、实时游戏等。

相关文章:

前端的8种跨域解决方案

在前端开发中&#xff0c;常见的跨域解决方案有以下8种&#xff1a; JSONP&#xff08;JSON with Padding&#xff09;&#xff1a;利用<script>标签的跨域特性&#xff0c;通过动态创建<script>标签&#xff0c;请求一个带有回调函数的接口&#xff0c;服务器返回…...

Linux知识点 -- 网络编程套接字

Linux知识点 – 网络编程套接字 文章目录 Linux知识点 -- 网络编程套接字一、预备知识1.认识端口号2.套接字3.TCP协议与UDP协议4.网络字节序 二、socket编程接口1.socket常见API2.sockaddr结构 三、UDP套接字编程1.直接打印客户端信息2.执行客户端发来的指令3.多用户聊天4.在wi…...

逆向大漠插件/用VB6.0实现后台鼠标移动和后台鼠标左键点击

自动化设计软件&#xff0c;在一款做门的设计软件CypCut6.3 上实现了自动化勾选了 复选框。一切都是基于后台的。 Private Const GW_CHILD 5 Private Const GW_HWNDFIRST 0 Private Const GW_HWNDNEXT 2 Public Declare Function FindWindow Lib "user32" Alias &…...

重庆OV证书和EV证书有什么区别

SSL数字证书按照保护的域名数量和类型可以分为单域名SSL证书、多域名SSL证书和通配符SSL证书三种&#xff0c;按照验证方式可以将SSL数字证书分为DV基础型SSL证书、OV企业型SSL证书和EV增强型SSL证书三种。今天就随SSL盾小编了解OV证书和EV证书的区别。 1.OV企业型SSL证书由CA…...

uni-app(微信小程序)图片旋转放缩,文字绘制、海报绘制

总结一下&#xff1a; 要进行海报绘制离不开canvas&#xff0c;我们是先进行图片&#xff0c;文字的拖拽、旋转等操作 最后再对canvas进行绘制&#xff0c;完成海报绘制。 背景区域设置为 position: relative&#xff0c;方便图片在当前区域中拖动等处理。添加图片&#xff0…...

Spring Boot 2.x基础教程

Spring Boot 2.x基础教程 一、简介1. Spring Boot 2.x 简介2. Spring Boot 2.x 特点3. Spring Boot 2.x 与 Spring Framework 的关系 二、Spring Boot 2.x 环境搭建1. JDK环境安装与配置2. Maven环境安装与配置3. Spring Boot 2.x 项目创建 三、核心功能1. 配置文件及其加载顺序…...

汽车红外夜视系统行业发展总体概况

汽车红外夜视系统是一种技术&#xff0c;旨在帮助驾驶员在夜间或低光条件下提供更好的视觉能力。它利用红外光谱的特性来检测和显示在正常光线下难以察觉的热能辐射。这使驾驶员能够在夜间或恶劣天气条件下更好地识别和辨别道路上的物体、行人、动物或其他车辆。 汽车红外夜视…...

Java 和 PHP GC 的差异和差异出现的原因

JAVA 的 GC 处理 判断草死掉的两种方式&#xff1a;引用计数和可达性分析 可达性分析对 JAVA 比较好用的原因是 JAVA遵守这面向对象的严格要求&#xff0c;每个变量都被对象包裹&#xff0c;所以每个变量都能通过对象来进行遍历找到&#xff0c;最终判断他们的是否被引用&…...

loguru logger使用

一、基本使用 ①标准使用 from loguru import logger# 在标准输出里面输出一行debug日志 logger.debug("Thats dubug")②设置输出格式 from loguru import loggerlogger.remove(0) # 先删除格式 logger.add(sink./logger.log, format"{time: %Y-%m-%d %H:%M…...

vue-自适应布局-postcss-pxtorem

原理&#xff1a; 比如一个375px设计稿 其中一个320px宽度的元素 如何实现自适应布局呢&#xff1f; 其实可以这样理解&#xff1a; 我们先计算出375屏幕时候320px的大小&#xff0c;在屏幕变化时候&#xff0c;这些元素都会等比例缩放 比如屏幕从375 变为750px时候&#xff0…...

9.12|day 5|day 44 |完全背包| 518. 零钱兑换 II | 377. 组合总和 Ⅳ

● 完全背包 主要是看清01背包和完全背包的区别 //01背包 for(int i 0;i<weight.size();i){ for(int j bagWeight;j>weight[i];j--){dp[j] Math.max(dp[j],dp[j-weight[i]]value[i]); } } //完全背包 for(int i 0;i<weight.size();i){for(int j weight[i];j<…...

C++ 中的原子变量(std::atomic)使用指南

目录 C 中的原子变量&#xff08;std::atomic&#xff09;使用指南基本概念使用方法创建原子变量读取值修改值原子操作 常见应用场景1. 计数器2. 控制标志3. 链表和数据结构 示例代码结论 C 中的原子变量&#xff08;std::atomic&#xff09;使用指南 原子变量&#xff08;std…...

【用unity实现100个游戏之9】使用Unity制作类八方旅人、饥荒风格的俯视角2.5D游戏

前言 2.5D游戏 是一种介于二维和三维之间的游戏形式。它通常在二维平面上展示游戏内容&#xff0c;但利用三维技术来实现更加逼真的图像效果。 在2.5D游戏中&#xff0c;角色和环境通常是以平面的形式呈现&#xff0c;但可以在垂直方向上移动。这意味着玩家可以在一个相对较薄…...

如何在群晖中,正确配置 docker 的 ipv6 地址

参考 2023年9月12日 https://synocommunity.com/ https://github.com/wangliangliang2/fix_synology_docker_ipv6 https://post.smzdm.com/p/an3np8m7/ 正文 关于这个话题&#xff0c;国内搜索引擎得到的结果出奇的一致&#xff0c;且过时。 &#xff08;看的我脑壳痛&#…...

XSS入门 XSS Challenges

level1(直接注入) <script>alert(xss)</script>level2(双引号闭合标签) 测试 <sCr<ScRiPt>IPT>OonN"\/(hrHRefEF)</sCr</ScRiPt>IPT>发现<>"被转换&#xff0c;构造新的语句 "><script>alert(/xss/)</…...

李沐《动手学深度学习》torch.cat() 和 torch.stack()的区别及思考

一、问题引出 好久没更新啦&#xff01;最近在学习沐神《动手学深度学习》6.5节池化层的时候&#xff0c;发现沐神在两处相似的地方使用了两种Python拼接函数torch.cat()和torch.stack()&#xff1a; 百思不得其解&#xff0c;于是查阅相关文档之后终于弄清楚了两者之间的区别…...

【算法与数据结构】235、LeetCode二叉搜索树的最近公共祖先

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题和这道题类似【算法与数据结构】236、LeetCode二叉树的最近公共祖先&#xff0c;相同的算法也能解…...

bboss 流批一体化框架 与 数据采集 ETL

数据采集 ETL 与 流批一体化框架 特性&#xff1a; 高效、稳定、快速、安全 bboss 是一个基于开源协议 Apache License 发布的开源项目&#xff0c;主要由以下三部分构成&#xff1a; Elasticsearch Highlevel Java Restclient &#xff0c; 一个高性能高兼容性的Elasticsea…...

JVM详细教程

JVM 前言 还在完善中先发布 JVM虚拟机厂家多钟多样&#xff0c;具体实现细节可能不一样&#xff0c;这里主要讲的是虚拟机的规范&#xff0c;以下内容融合了各个平台发布的内容和周志明老师的《深入理解java虚拟机》 JVM概述 如何理解jvm跨平台&#xff1f; 编译成汇编代码…...

Smartbi吴华夫:后疫情时代,BI发展趋势的观察与应对

沿着旧地图找不到新大陆&#xff0c;“基于指标体系的可视化分析和增强分析”成为BI发展新阶段。Smartbi V11系列新品与时俱进&#xff0c;以指标为核心&#xff0c;同时融合BI应用&#xff0c;赋能管理者和业务&#xff0c;成为引领数字化运营的新航标&#xff01; ——思迈特…...

软件设计模式系列之三———工厂方法模式

1 模式的定义 工厂方法模式是一种常见的设计模式&#xff0c;属于创建型设计模式之一&#xff0c;它在软件工程中用于对象的创建。该模式的主要思想是将对象的创建过程抽象化&#xff0c;将具体对象的实例化延迟到子类中完成&#xff0c;以便在不同情况下可以创建不同类型的对…...

pytorch 多卡分布式训练 调用all_gather_object 出现阻塞等待死锁的问题

pytorch 多卡分布式训练 torch._C._distributed_c10d中的函数all_gather_object 出现阻塞等待死锁的问题 解决办法就是 在进程通信之前调用torch.cuda.set_device(local_rank) For NCCL-based processed groups, internal tensor representations of objects must be moved …...

SpringMvc增删改查

SpringMvc增删改查 一、前期准备二、逆向生成增删改查2.2.aspect切面层2.3.Mybatis generator逆向生成2.4.根据生成代码编写Biz层与实现类 三、controller层代码编写四、前台代码与分页代码五、案例测试 一、前期准备 1.2.导入pom.xml依赖 <?xml version"1.0" …...

【计算机网络】网络编程接口 Socket API 解读(5)

Socket 是网络协议栈暴露给编程人员的 API&#xff0c;相比复杂的计算机网络协议&#xff0c;API 对关键操作和配置数据进行了抽象&#xff0c;简化了程序编程。 本文讲述的 socket 内容源自 Linux man。本文主要对各 API 进行详细介绍&#xff0c;从而更好的理解 socket 编程。…...

手动实现一个bind函数!

原文地址&#xff1a;手动实现一个bind函数&#xff01; - 知乎 1.bind函数用法 bind()方法用于创建一个新的函数&#xff0c;这个新函数接收的第一个参数代表的就是this&#xff0c;利用bind()函数我就就可以任意改变函数内部的this指向了。 官网的解释&#xff1a; bind()…...

数据结构-时间复杂度/空间复杂度

Hello&#xff0c;好久没有更新了哦&#xff0c;已经开始学习数据结构了&#xff0c;这篇文章呢就是对刚学数据结构所接触到的时间复杂度进行一个分享哦&#xff0c;如果有错误之处&#xff0c;大家记得拍拍我哦~ 既然要讨论时间/空间复杂度&#xff0c;那我们就得知道时间/空…...

英语写作中“展示”、“表明”demonstrate、show、indicate、illustrate的用法

一、demonstrate、show、indicate在论文写作中主要用法是&#xff1a;demonstrate/show/indicate 从句&#xff1a; Sb./Sth. demonstrates/shows/indicates that ……从句中一般表达事实、观点和结论等。 例句&#xff1a; The authors demonstrated/showed/indicated that…...

Redis的java客户端

在Redis官网中提供了各种语言的客户端&#xff0c;地址&#xff1a;https://redis.io/resources/clients/ redis的java客户端 https://redis.io/resources/clients/#java 1.jedis使用 引入依赖 <dependency><groupId>redis.clients</groupId><artifac…...

Android环境配置笔记

文章目录 一、各环境文档二、参考 一、各环境文档 Gradle官方的兼容性文档&#xff1a;Java Compatibility 更新日期&#xff1a;2023.9.12 Android Gradle插件版本&#xff1a;Android Gradle Plugin 二、参考 参考文章&#xff1a;Android问题记录...

element-table 行的拖拽更改顺序(无需下载sortableJs

样例展示&#xff1a;vueelement 通过阅读element文档我们发现element并不提供拖拽相关的api 本博客通过element提供的行类名 注册函数 实现行与行的拖拽 1.设置el-table 的行样式类名 这里是用的是 function <el-table:data"outputData":row-class-name&qu…...

网站模块建设建议/排名seo公司

Linux中yum和apt-get用法及区别一般来说著名的linux系统基本上分两大类&#xff1a;1.RedHat系列&#xff1a;Redhat、Centos、Fedora等2.Debian系列&#xff1a;Debian、Ubuntu等RedHat 系列 1 常见的安装包格式 rpm包,安装rpm包的命令是“rpm -参数” 2 包管理工具 yum 3 支…...

南宁企业网站建站模板/小说搜索风云榜

HLEd工具是针对语音标签的处理工具&#xff0c;这个工具可以根据发音字典&#xff0c;将发音序列的描述文件自动标记成发音词典的发音序列。在HTK中使用MLF格式的文件来描述发音序列。 一&#xff0c;基本用法 HLEd [options] edCmdFile labFiles ..该命令执行完后&#xff0c…...

安徽六安彩礼一般给多少/百度 seo 工具

查接口找到的&#xff0c;分享给大家&#xff0c;希望对大家以后开发有用 火车车次查询-余票查询--Api接口 1.来自12306的火车车次数据 使用12306网站的接口&#xff0c;查询余票。此接口采集自这里。全国火车站代号字典&#xff0c;下载。火车票余票查询 http://dynamic.123…...

wordpress文章调用插件/求职seo服务

简单面试题&#xff0c;但是容易忘记 1.为什么等待和通知是在 Object 类而不是 Thread 中声明的&#xff1f; **1) wait 和 notify 不仅仅是普通方法或同步工具&#xff0c;更重要的是它们是 Java 中两个线程之间的通信机制。**对语言设计者而言, 如果不能通过 Java 关键字(例…...

树莓派上怎么做网站/宝鸡seo优化公司

课程首页在&#xff1a;http://blog.csdn.net/sxhelijian/article/details/11890759【项目5-银行系统】  这是我们要做的一个真正的项目&#xff01;涉及到的技术都用过了&#xff0c;只不过&#xff0c;程序真的要长得多了。  在学习中&#xff0c;总是想要些成就感的。当…...

保定官网seo分析/seo站点是什么意思

试验网站#1搜索引擎优化收录情况记录(断续运行)日期Yahoogooglebaidusogou每日收录每日收录增量每日收录每日收录增量每日收录每日收录增量每日收录每日收录增量2007-6-24288 333 1060 4813 2007-6-25164013523330108020481302007-6-26空间超过6月流量限制……&#xff0c;…...