前端解决跨域问题( 6种方法 )

news2024/11/20 6:32:31

本专栏是汇集了一些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)等攻击。

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

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

相关文章

使用JDBC操作数据库

意志、工作和等待是成功的金字塔的基石。 Will, work and wait are the pyramidal cornerstones for success. 文章目录 JDBC简介&#xff1a;JDBC访问数据库步骤StatementPreparedStatement JDBC简介&#xff1a; 在Java应用程序中&#xff0c;JDBC&#xff08;Java Database…

CSS 入门指南(二)CSS 常用样式及注册页面案例

CSS 常用样式 颜色属性 常见样式的颜色属性&#xff1a; color&#xff1a;定义文本的颜色border-color&#xff1a;定义边框的颜色background-color&#xff1a;设置背景色 颜色属性值设置方式&#xff1a; 十六进制值 - 如&#xff1a;&#xff03;FF0000一个RGB值 - 如…

docker安装ollama

拉取镜像 docker pull ollama/ollama 运行容器 &#xff08;挂载路径 D:\ollama 改成你自己喜欢的路径&#xff09; CPU only docker run -d -v D:\ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama Nvidia GPU&#xff08;没试过这个&#xff09; doc…

LeetCode203:移除链表元素

题目描述 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 解题思想 使用虚拟头节点 代码 struct ListNode {int val;ListNode* next;ListNode() :val(0), next(nullptr) {};ListNode(i…

1 Tomcat服务器Servlet入门

今日目标 web知识概述tomcat【重点】创建servlet xml anno&#xff08;注解&#xff09;servlet执行原理servlet生命周期servlet体系结构 1.web相关知识概述【了解】 1.WEB简介 学习目标 了解什么是web 内容讲解 Web&#xff08;World Wide Web&#xff09;即全球广域网…

MyBatisPlus理解

MyBatisPlus是mybatis的增强&#xff0c;mybatis是数据库持久化的框架&#xff0c;但mybatisplus并不是替代mybatis&#xff0c;而是相辅相成的关系 MyBatisPlus不会对以前使用mybatis开发的项目进行影响&#xff0c;引入后仍然正常运行。 使用方法&#xff1a; 1.在引入了对…

IDM的使用详解 IDM是哪个国家的 IDM功能强大的网络下载器 idm下载

对于idm相信大家都不陌生&#xff0c;全称是Internet Download Manager。idm是一款非常经典、功能强大的Windows文件多线程下载加速软件&#xff0c;在电脑用户中口碑极好&#xff0c;被称为必装的HTTP下载神器。那么idm下载器是哪个国家的&#xff0c;idm下载器是哪个公司的呢…

重学SpringBoot3-集成Thymeleaf

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 重学SpringBoot3-集成Thymeleaf 1. 添加Thymeleaf依赖2. 配置Thymeleaf属性&#xff08;可选&#xff09;3. 创建Thymeleaf模板4. 创建一个Controller5. 运行应用并访问页面Thymeleaf基本语法小技巧 国际化步骤 …

【漏洞复现】华三用户自助服务产品dynamiccontent.properties.xhtml接口处存在RCE漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

【python 】----Pytest基础知识与进阶知识

定义 用于编写和执行Python测试全功能测试框架(工具),是一个第三方库 安装 pip insatll pytest 安装pytest --version 校验 pytest的组成构成 不写调用语句也可以执行函数内容 在用例运行语句里面: -s:指的是开启与终端的交互,如果没有-s(程序不会输入与打印),一条用…

Tiktok/抖音旋转验证码识别方案

一、引言 在数字世界的飞速发展中&#xff0c;安全防护成为了一个不容忽视的课题。Tiktok/抖音&#xff0c;作为全球最大的短视频平台之一&#xff0c;每天都有数以亿计的用户活跃在其平台上。为了保护用户的账号安全&#xff0c;Tiktok/抖音引入了一种名为“旋转验证码”的安…

[数据结构]OJ用队列实现栈

225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; 官方题解&#xff1a;https://leetcode.cn/problems/implement-stack-using-queues/solutions/432204/yong-dui-lie-shi-xian-zhan-by-leetcode-solution/ 首先我们要知道 栈是一种后进先出的数据结构&#xff0c…

[Spring] IoC 控制反转和DI依赖注入和Spring中的实现以及常见面试题

目录 1. 什么是Spring 2.什么是IoC容器 3.通过实例来深入了解IoC容器的作用 3.1造一量可以定义车辆轮胎尺寸的车出现的问题 3.2解决方法 3.3IoC优势 4.DI介绍 5.Spring中的IoC和DI的实现 5.1.存对象 5.1.2 类注解 5.1.3 方法注解 5.2取对像 (依赖注入) 5.2.1.属性…

esp32 idf.py cmd powershell 环境

esp32 idf.py cmd powershell 命令行 环境 win10 推荐使用 Windows Terminal 替换自己路径 设置–>添加新配置文件–>选择cmd 或者 powershell -->保存–> 去修改命令行 启动目录&#xff0c;推荐使用父进程目录 powershell C:\WINDOWS/System32/WindowsPowe…

Docker 容器化技术:构建高效、可移植的开发环境和部署流程|Docker 概述

容器技术是云原生的核心技术之一&#xff0c;利用容器化技术&#xff0c;可以将微服务以及它所需要的配置、依赖关系、环境变了等都可以便捷地部署到新的服务器节点上&#xff0c;而不用再次重新配置&#xff0c;这就使得微服务具备了强大的可移植性。 一、Docker 概述 Docke…

【前端系列】CSS 常见的选择器

CSS 常见的选择器 CSS&#xff08;层叠样式表&#xff09;是一种用于描述网页样式的标记语言&#xff0c;它定义了网页中各个元素的外观和布局。在 CSS 中&#xff0c;选择器是一种用于选择要应用样式的 HTML 元素的模式。选择器允许开发人员根据元素的类型、属性、关系等来选…

Android平台实现无纸化同屏并推送RTMP或轻量级RTSP服务(毫秒级延迟)

技术背景 在写这篇文章之前&#xff0c;实际上几年之前&#xff0c;我们就有非常稳定的无纸化同屏的模块&#xff0c;本文借demo更新&#xff0c;算是做个新的总结&#xff0c;废话不多说&#xff0c;先看图&#xff0c;本文以Android平台屏幕实时采集推送&#xff0c;Windows…

javaEE6(网站第3章-jsp练习中三个例题动手做一遍;课后题2(1),(2))

两个数求和 用javascript实现。 输入、处理、输出用同一个页面(自己处理自己)。 输入1.jsp&#xff0c;处理和输出2.jsp。 &#xff08;4&#xff09;输入1.jsp&#xff0c;处理2.jsp&#xff0c;处理完转回1.jsp显示结果。 &#xff08;5&#xff09;输入1.jsp&#xff0c;处…

【Prometheus】k8s集群部署node-exporter

​ 目录 一、概述 1.1 prometheus简介 1.2 prometheus架构图 1.3 Exporter介绍 1.4 监控指标 1.5 参数定义 1.6 默认启用的参数 1.7 prometheus如何收集k8s/服务的–三种方式收集 二、安装node-exporter组件 【Prometheus】概念和工作原理介绍-CSDN博客 【云原生】ku…

堆宝塔(Python)

作者 陈越 单位 浙江大学 堆宝塔游戏是让小朋友根据抓到的彩虹圈的直径大小&#xff0c;按照从大到小的顺序堆起宝塔。但彩虹圈不一定是按照直径的大小顺序抓到的。聪明宝宝采取的策略如下&#xff1a; 首先准备两根柱子&#xff0c;一根 A 柱串宝塔&#xff0c;一根 B 柱用于…