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

前端跨域~简述

前言 :绿蚁新醅酒,红泥小火炉

第一:前端跨域(粗谈概念)

1. 疑惑

  • 当前端请求后端接口不通,浏览器控制台出现类似信息,则需要解决跨域
    Access to XMLHttpRequest at ‘http://47.100.214.160:10086/api/select’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource…

2. 解决

  • 解决跨域方式,前端方式一:本地设置代理或者nginx上配置、后端方式:通过注解或配置【有些后端人员会反驳你,接口在postman上访问是有数据没问题的,因为postman上不会有限制,只有浏览器访问才有同源策略的限制;】

3. 同源策略

什么是浏览器的同源策略?浏览器的同源策略的限制(约束通信双方,必须满足:同协议、同域名、同端口三者一致,才能进行通信访问)

举例分析:
http://47.100.214.160:10086
http://localhost:8080
协议:http=http 、域名:47.100.214.160≠localhost、端口10086≠8080 (注:这里的47.100.214.160 是IP,这个IP会有映射的域名,而这里的lacalhost就是本机域名,所以二者不可能相等)
在浏览器上,通信必须同时满足协议、域名、IP三者一致才可以!

第二:跨域解决(开发、生产环境)

  • 1.本地配置代理(webpack的配置):在项目根目录创建代理文件,将请求转发到后端服务器(例如:angular中的proxy.conf.json、vue中的vue.config.js

  • 2.反向代理‌:通过Nginx等反向代理服务器来转发请求,客户端与代理服务器通信,代理服务器再与目标服务器通信,从而绕过同源策略‌

  • 3.CORS(跨域资源共享)策略‌:在服务器端设置合适的CORS响应头,允许指定源进行跨域请求(服务器在响应中附加Access-Control-Allow-Origin头,指定允许访问的域‌)(后端人员配置)。

  • 4.iframe标签:1. 使用 document.domain 和 iframe的方式是一种简单【开发环境】跨域方法,而且在同一顶级域名下的子域之间进行跨域通信;缺陷:如果域名不同,浏览器会阻止跨域请求通信,并且iframe中的页面无法访问对方的DOM对象。2. 使用postMessage方法来实现【生产环境】跨域通信。postMessage允许不同源的窗口进行安全的跨域通信;

  • 5.websocket:websocket协议自带跨域功能,不受同源策略限制,因此可以轻松地在不同域的页面间进行通信,如果单纯就这样就好了…( 虽然WebSocket协议本身不受同源策略限制,但在建立连接时需要通过HTTP握手过程(浏览器和服务器建立连接,是通过http请求和响应完成的),而这个过程会受到浏览器同源策略的限制,然后~ 又回到跨域问题…)

补充说明:
在项目开发中,解决跨域时注意区分开发、生产环境,在不同环境下虽然都是一个东西,但是两种写法!!!
这里,第4点以举例,iframe标签在开发环境设置document.domain来实现跨域、在生产环境使用另一种…
第5点,websocket跨域也是开发、生产环境用法不一样的,此处省略…

相关文章:

前端跨域~简述

前言 :绿蚁新醅酒,红泥小火炉 第一:前端跨域(粗谈概念) 1. 疑惑 当前端请求后端接口不通,浏览器控制台出现类似信息,则需要解决跨域 Access to XMLHttpRequest at ‘http://47.100.214.160:10…...

GIN:逼近WL-test的GNN架构

Introduction 在 图卷积网络GCN 中我们已经知道图神经网络在结点分类等任务上的作用,但GIN(图同构神经网络)给出了一个对于图嵌入(graph embedding)更强的公式。 GIN,图同构神经网络,致力于解…...

NIST密码学未来展望:Naughty Step 上的 SHA-1、3DES 和 SHA-224

1. 引言 NIST 几十年来一直致力于推动密码学标准的发展,2024年10月,其发布了Transitioning the Use of Cryptographic Algorithms and Key Lengths 草案: 概述了 SHA-1(为160位哈希算法) 将在不久的将来退役&#xf…...

go 集成gorm 数据库操作

一、什么是gorm GORM 是一个用于 Go 语言的 ORM(对象关系映射)库,它提供了一种简单而强大的方式来与数据库进行交互。GORM 支持多种数据库,包括 MySQL、PostgreSQL、SQLite、SQL Server 等,并且提供了丰富的功能&…...

进程 线程 和go协程的区别

进程和线程是操作系统中两个重要的执行单元,理解它们的区别对于编程和系统设计非常重要。以下是它们的主要区别: ### 进程(Process) 定义:进程是一个正在执行的程序的实例,具有独立的地址空间。 资源&…...

STM32获取SHT3X温湿度芯片数据

目录 一、概述 二、单次数据采集模式的测量 1、配置说明 2、代码实现方式 三、周期性数据采集模式的测量 1、配置说明 2、代码实现方式 四、完整代码下载链接 一、概述 SHT3X是Sensirion公司推出的一款高精度、完全校准的温湿度传感器,基于CMOSens技术。它提…...

卸载miniconda3

1. 找到miniconda目录&#xff0c;删除。 rm -rf miniconda3/ 2. 编辑bashrc sudo vim .bashrc setup路径改回anaconda3的&#xff0c;注释掉“>>> conda initialize >>>”和"<<< conda initialize <<<"之间的miniconda的语…...

游戏中的设计模式及杂项

概述 如果要做以下游戏功能会用到哪些设计模式。比如创建一个人物角色&#xff0c;这个角色可以装备刀&#xff0c;然后角色可以用刀砍怪物&#xff0c;造成流血。 对于这个游戏功能&#xff0c;可以使用以下设计模式&#xff1a; 工厂模式&#xff08;Factory Pattern&#x…...

Docker网络和overlay的基础讲解

本人发现了两篇写的不错的文章&#xff1a;Docker网络 - docker network详解-CSDN博客&#xff0c;Docker 容器跨主机通信 overlay_docker overlay 网络-CSDN博客 因为这两篇文章中含有大量的例子&#xff0c;新手看起来毫不费力。于是我偷了个小懒&#xff0c;在本篇文章中没有…...

分布式数据库:深入探讨架构、挑战与未来趋势

引言 在数字化时代&#xff0c;数据已成为企业的核心资产。随着数据量的爆炸性增长和业务需求的多样化&#xff0c;传统的集中式数据库已难以满足现代应用对于高可用性、可扩展性和性能的需求。分布式数据库以其独特的优势&#xff0c;如数据的高可用性、容错性和可扩展性&…...

基于Springboot+Vue的仓库管理系统 (含源码数据库)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 这个系…...

基于立体连接与开源链动 2+1 模式的新商业路径探索

摘要&#xff1a;本文深入剖析了立体连接的内涵&#xff0c;包括其核心关键词、连接路径与主体&#xff0c;同时详细阐述了开源链动 2 1 模式、AI 智能名片和 S2B2C 商城小程序源码的特点与功能。在此基础上&#xff0c;深入研究这些要素的融合方式及其在商业实践中的应用&…...

开启鸿蒙开发之旅:核心组件及其各项属性介绍——布局容器组件

写在前面 组件的结构 rkTS通过装饰器 Component 和 Entry 装饰 struct 关键字声明的数据结构&#xff0c;构成一个自定义组件。 自定义组件中提供了一个 build 函数&#xff0c;开发者需在该函数内以链式调用的方式进行基本的 UI 描述 今天我们要学习的就是写在build 函数里的系…...

RabbitMQ 全面解析:语法与其他消息中间件的对比分析

1. 引言 在分布式系统和微服务架构中&#xff0c;消息中间件扮演着重要的角色。它们能够解耦服务、平衡负载、提高系统的可扩展性和可靠性。RabbitMQ 是其中广受欢迎的一种。本文将从 RabbitMQ 的基础概念、语法介绍、以及与其他消息中间件的对比角度&#xff0c;全面剖析其在…...

Three.js 搭建3D隧道监测

Three.js 搭建3D隧道监测 Three.js 基础元素场景scene相机carema网络模型Mesh光源light渲染器renderer控制器controls 实现3d隧道监测基础实现道路实现隧道实现多个摄像头点击模型进行属性操作实现点击模型发光效果 性能监视器stats引入使用 总结完整代码 我们将通过three.js技…...

「IDE」集成开发环境专栏目录大纲

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「IDE」集成开发环境&#x1f4da;全部专栏「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C」C/C程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定…...

MySQL-初识数据库

目录 一、数据库基础概念 1、SQL 2、数据&#xff08;Data&#xff09; 3、数据库&#xff08;DB&#xff09; 4、数据库管理系统DBMS 5、数据库系统DBS 6、关系模型&#xff08;Relational Model&#xff09; 7、E-R图 8、常见的数据库 9、数据库基本操作 一、数据库…...

初始 html

html 文件结构 html 标签是整个 html 文件的根标签(最顶层标签) head 标签中写页面的属性. body 标签中写的是页面上显示的内容 title 标签中写的是页面的标题 <html><head><title>这是一个标题</title></head><body></body> <…...

前端 call、bind、apply的实际使用

目录 一、call 1、继承的子类可以使用父类的方法 2、可以接收任意参数 二、call、apply、bind比较 1、案例一 2、案例二 三、总结 这个三个方法都是改变函数的this指向的方法。 一、call 代码&#xff1a; const obj{uname:"pink"}function fn(){console.log…...

非关系型数据库NoSQL的类型与优缺点对比

NoSQL数据库根据数据模型和应用场景主要分为四种类型&#xff1a;键值型、列族型、文档型和图形型。以下是对每种类型的详细描述&#xff0c;包括其应用场景、优缺点的比较&#xff1a; 1. 键值型数据库 (Key-Value Store) 典型代表 RedisMemcachedAmazon DynamoDB 应用场景…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

Ubuntu系统复制(U盘-电脑硬盘)

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...