前端实现跨域的六种解决方法
本专栏是汇集了一些HTML常常被遗忘的知识,这里算是温故而知新,往往这些零碎的知识点,在你开发中能起到炸惊效果。我们每个人都没有过目不忘,过久不忘的本事,就让这一点点知识慢慢渗透你的脑海。
本专栏的风格是力求简洁明了。
文章目录
- 解决前端跨域问题的方法:
- 1. CORS(跨域资源共享)
- 2.JSONP(JSON with Padding)
- 3. Proxy(代理)
- 4. PostMessage
- 5.WebSocket
- 6. 服务器端反向代理
跨域问题是指当一个网页试图访问来自不同源(域名、协议、端口)的资源时,浏览器会出于安全考虑而限制这种访问。这是因为浏览器的同源策略防止了恶意网站获取其他网站的敏感信息。

解决前端跨域问题的方法:
1. CORS(跨域资源共享)
CORS 是一种 W3C 标准,它允许服务器明确地允许来自其他源的请求。通过在服务器端设置适当的响应头,例如 Access-Control-Allow-Origin,可以指定允许哪些源进行跨域请求。这种方法需要服务器端的配合,因为需要在服务器上配置 CORS。
具体实现步骤如下:
- 在服务器端,通过设置响应头
Access-Control-Allow-Origin来指定允许的跨域源。例如,Access-Control-Allow-Origin: *表示允许来自任何源的跨域请求,或者可以指定具体的源,如Access-Control-Allow-Origin: http://example.com。 - 服务器还可以设置其他 CORS 相关的头部,如
Access-Control-Allow-Methods(允许的请求方法)、Access-Control-Allow-Credentials(是否允许携带凭证)等。 - 在客户端,发起跨域请求时,浏览器会根据服务器返回的 CORS 头部信息来判断是否允许该请求。
CORS 是一种比较灵活和常用的跨域解决方案,但需要服务器端的支持和配置。
2.JSONP(JSON with Padding)
JSONP 是一种利用 <script> 标签的跨域请求方式。它通过动态创建一个 <script> 标签,并将跨域请求的 URL 作为其 src 属性。服务器端需要将响应的数据以函数调用的形式返回,客户端通过定义对应的回调函数来接收数据。
具体实现步骤如下:
- 在客户端,创建一个全局的回调函数,用于处理接收到的数据。
- 通过动态创建
<script>标签,并设置其 src 属性为跨域请求的 URL,同时将回调函数的名称作为查询参数传递给服务器。 - 服务器接收到请求后,根据查询参数中的回调函数名称,将数据包装成函数调用的形式返回。
- 客户端的浏览器会执行返回的脚本,从而触发回调函数,并将数据传递给回调函数进行处理。
JSONP 的缺点是只支持 GET 请求,并且在安全性和灵活性方面有一些限制。
3. Proxy(代理)
可以在本地搭建一个代理服务器,将跨域请求通过代理服务器转发到目标服务器。代理服务器可以处理 CORS 相关的问题,并将响应返回给客户端。
具体实现步骤如下:
- 在本地搭建一个代理服务器,可以使用 Node.js 等技术实现。
- 客户端将跨域请求发送到代理服务器,代理服务器根据配置将请求转发到目标服务器。
- 目标服务器返回的数据经过代理服务器后再返回给客户端。
代理服务器可以提供更多的控制和定制,但需要额外的开发和维护工作。
4. PostMessage
如果跨域的两个页面属于同一父域下的不同子域,或者属于同一页面的不同 iframe,可以使用 postMessage 方法进行通信。通过窗口或 iframe 之间的消息传递来实现数据共享。
具体实现步骤如下:
- 发送方通过
window.postMessage方法发送消息,指定目标窗口或 iframe 的源。 - 接收方通过注册
message事件来监听和处理接收到的消息。
postMessage 方法适用于一些特定的场景,但对于跨不同域的情况并不适用。
5.WebSocket
WebSocket 是一种基于 TCP 的全双工通信协议,它允许客户端和服务器之间建立持久的连接,并进行实时的双向数据传输。通过 WebSocket,跨域通信可以更加高效和实时。
具体实现步骤如下:
- 客户端和服务器都需要支持 WebSocket 协议,并建立 WebSocket 连接。
- 一旦连接建立,双方可以通过 WebSocket 进行实时的消息收发。
WebSocket 适用于需要实时通信的场景,如实时聊天、实时数据推送等。
6. 服务器端反向代理
将前端应用部署到一个反向代理服务器后面,然后通过代理服务器来处理跨域请求。代理服务器可以将请求转发到后端的不同服务器,并处理 CORS 相关的问题。
具体实现步骤如下:
- 设置反向代理服务器,如 Nginx 或 Apache。
- 在反向代理服务器中配置适当的规则和头信息,以处理跨域请求。
这种方法需要对服务器配置有一定的了解,并可能需要一些额外的配置工作。
选择跨域解决方法时,需要考虑项目的具体需求、安全性、可行性和可维护性等因素。同时,还需要注意跨域请求的安全性,避免暴露敏感信息或受到跨站请求伪造(CSRF)等攻击。
相关文章:
前端实现跨域的六种解决方法
本专栏是汇集了一些HTML常常被遗忘的知识,这里算是温故而知新,往往这些零碎的知识点,在你开发中能起到炸惊效果。我们每个人都没有过目不忘,过久不忘的本事,就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简洁…...
macOS上实现「灵动岛」效果
自从Apple iPhone推出了「灵动岛」功能后,用户们就被其优雅的设计和强大的功能所吸引。然而,作为macOS用户,我们一直在等待这一功能能够在我们的设备上实现。现在,随着新的应用程序的推出,我们终于可以在我们的Mac上体…...
幕译--本地字幕生成与翻译--Whisper客户端
幕译–本地字幕生成与翻译 本地离线的字幕生成与翻译,支持GPU加速。可免费试用,无次数限制 基于Whisper,希望做最好的Whisper客户端 功能介绍 本地离线,不用担心隐私问题支持GPU加速支持多种模型支持(中文、英语、日…...
链表基础知识详解
链表基础知识详解 一、链表是什么?1.链表的定义2.链表的组成3.链表的优缺点4.链表的特点 二、链表的基本操作1.链表的建立2.链表的删除3.链表的查找4.链表函数 一、链表是什么? 1.链表的定义 链表是一种物理存储单元上非连续、非顺序的存储结构…...
GPT-prompt大全
ChatGPT目前最强大的的工具是ChatGPT Plus,不仅训练数据更新到了2023年,而且还可以优先访问新功能。对于程序员来说,升级到ChatGPT Plus,将会带来更多的便利和效率提升。 根据 升级ChatGPT Plus保姆级教程,1分钟就可以…...
的发射点2
☞ 通用计算机启动过程 1️⃣一个基础固件:BIOS 一个基础固件:BIOS→基本IO系统,它提供以下功能: 上电后自检功能 Power-On Self-Test,即POST:上电后,识别硬件配置并对其进行自检,…...
深入揭秘Lucene:全面解析其原理与应用场景(一)
本系列文章简介: 本系列文章将深入揭秘Lucene,全面解析其原理与应用场景。我们将从Lucene的基本概念和核心组件开始,逐步介绍Lucene的索引原理、搜索算法以及性能优化策略。通过阅读本文,读者将会对Lucene的工作原理有更深入的了解…...
拿捏算法的复杂度
目录 前言 一:算法的时间复杂度 1.定义 2.简单的算法可以数循环的次数,其余需要经过计算得出表达式 3.记法:大O的渐近表示法 表示规则:对得出的时间复杂度的函数表达式,只关注最高阶,其余项和最高阶…...
C语言实战—猜数字游戏(涉及循环和少部分函数内容)
对于前面一些内容的总结 不妨跟着一起试试吧 折半查找算法(二分查找) 比如我买了一双鞋,你好奇问我多少钱,我说不超过300元。你还是好奇,你想知道到底多少,我就让 你猜,你会怎么猜?…...
#define MODIFY_REG(REG, CLEARMASK, SETMASK)
#define MODIFY_REG(REG, CLEARMASK, SETMASK) WRITE_REG((REG), (((READ_REG(REG)) & (~(CLEARMASK))) | (SETMASK))) 这个宏 MODIFY_REG 是在嵌入式编程中,它用于修改一个寄存器的特定位,而不影响其他位。这个宏接受三个参数ÿ…...
使用 Docker 部署 Stirling-PDF 多功能 PDF 工具
1)Stirling-PDF 介绍 大家应该都有过这样的经历,面对一堆 PDF 文档,或者需要合并几个 PDF,或者需要将一份 PDF 文件拆分,又或者需要调整 PDF 中的页面顺序,找到的线上工具 要么广告满天飞,要么 …...
springcloud第3季 项目工程搭建与需求说明1
一 需求说明 1.1 实现结构图 订单接口调用支付接口 二 工程搭建 2.1 搭建工程步骤...
外包干了3个月,技术退步明显。。。。
先说一下自己的情况,本科生,2019年我通过校招踏入了南京一家软件公司,开始了我的职业生涯。那时的我,满怀热血和憧憬,期待着在这个行业中闯出一片天地。然而,随着时间的推移,我发现自己逐渐陷入…...
Redis特性与应用场景
Redis是一个在内存中存储数据的中间件,用于作为数据库,用于作为数据缓存,在分布式系统中能够发挥重要作用。 Redis的特性 1.In-memory data structures: MySQL使用表的方式存储数据,这意味着数据通常存储在硬盘上,并且…...
openssl3.2 - exp - 可以在命令行使用的口令算法名称列表
文章目录 openssl3.2 - exp - 可以在命令行使用的口令算法名称列表概述笔记测试工程实现备注整理 - 总共有126种加密算法可用于命令行参数的密码加密算法备注END openssl3.2 - exp - 可以在命令行使用的口令算法名称列表 概述 上一个笔记openssl3.2 - exp - PEM <…...
模板不存在:./Application/Home/View/OnContact/Index.html 错误位置
模板不存在:./Application/Home/View/OnContact/Index.html 错误位置FILE: /home/huimingdedhpucixmaihndged5e/wwwroot/ThinkPHP123/Library/Think/View.class.php LINE: 110 TRACE#0 /home/huimingdedhpucixmaihndged5e/wwwroot/ThinkPHP123/Library/Think/View.class.php(…...
复杂的数据类型如何转成字符串!
1.首先,会调用 valueOf 方法,如果方法的返回值是一个基本数据类型,就返回这个值, 如果调用 valueOf 方法之后的返回值仍旧是一个复杂数据类型,就会调用该对象的 toString 方法, 如果 toString 方法调用之后…...
云原生构建 微服务、容器化与容器编排
第1章 何为云原生,云原生为何而生 SOA也就是面向服务的架构 软件架构的发展主要经历了集中式架构、分布式架构以及云原生架构这几代架构的发展。 微服务架构,其实是SOA的另外一种实现方式,属于SOA的子集。 在微服务架构下,系统…...
JavaSE——面向对象高级一(2/4)-饿汉式单例、懒汉式单例、代码块、static的注意事项
目录 static的注意事项 static相关:代码块 单例设计模式 饿汉式单例 懒汉式单例 static的注意事项 类方法中可以直接访问类的成员,不可以直接访问实例成员。 public class Student{//定义一个类变量和一个实例变量static String schoolName;int s…...
排序之冒泡排序
通过连续地比较与交换相邻元素实现排序。这个过程就像气泡从底部升到顶部一样,因此得名冒泡排序。 流程: 首先,对 n 个元素执行“冒泡”,将数组的最大元素交换至正确位置。接下来,对剩余 n−1 个元素执行“冒泡”&…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
毫米波雷达基础理论(3D+4D)
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的,启动是正常的, 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...
6.9-QT模拟计算器
源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践,很多人以为AI已经强大到不需要程序员了,其实不是,AI更加需要程序员,普通人…...
