前端跨域~简述

news2024/11/14 11:16:46

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

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

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跨域也是开发、生产环境用法不一样的,此处省略…

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

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

相关文章

基于Spring Boot+Vue的养老院管理系统【原创】

一.系统开发工具与环境搭建 1.系统设计开发工具 后端使用Java编程语言的Spring boot框架 项目架构:B/S架构 运行环境:win10/win11、jdk17 前端: 技术:框架Vue.js;UI库:ElementUI; 开发工具&…

Maven 中央仓库地址 mvnrepository.com

下载一些 jar 包驱动,不需用去官网下了,直接去 Maven 中央仓库,高效、简单 Maven 中央仓库地址 https://mvnrepository.com/open-source 我们下期见,拜拜!

2024 年将 Postman 文档导出为 HTML 或 Markdown

2024 年将 Postman 文档导出为 HTML 或 Markdown

Anaconda安装库

相信有些人可能遇到pip直接安装失败,conda直接安装失败,pip镜像安装仍然失败的可能性,下面我记录一下我的一种解决方法。 我使用的是上面的miniconda3配置。 1.创建虚拟环境 首先,先新建一个虚拟环境 conda create -n py39 pyt…

linux命令详解,openssl+历史命令详解

openssl openssl是一个开源的加密工具包,提供了各种加密、解密、签名、验证等功能 openssl passwd -1 123password表示这个命令用于处理密码相关的操作,-1参数指定使用MD5加密算法对密码“123”进行加密处理。MD5是一种常用的哈希算法,它将…

Flink运行时架构以及核心概念

1.运行构架 1.提交作业后启动一个客户端进程,客户端解析参数(-d -t 等等),后进行封装由Actor通信系统提交,取消,更新任务给JobManager。 2.JobManager(进程)通信系统一个组件叫分发…

解决C盘空间不足的三种方案

方案一:网上盛传的C盘磁盘碎片整理🧩(原理:将分散的文件片段整理到相邻的磁盘区域,减少文件的碎片化程度)(效果不明显) 方案二:把其他盘的空间给C盘 💽(效果显著&#xf…

echarts-gl 3D柱状图配置

1. 源码 此demo可以直接在echarts的编辑器中运行 option {title: {text: 产量图,textStyle: {color: rgba(255, 255, 255, 1),fontSize: 17},left: center},tooltip: {},legend: {show: false,orient: vertical,x: left,top: 0,right: 20,textStyle: {fontSize: 12}},visualM…

C++笔记---智能指针

1. 什么是智能指针 1.1 RALL设计思想 RAII(Resource Acquisition Is Initialization,资源获取即初始化)是一种资源管理类的设计思想,广泛应用于C等支持对象导向编程的语言中。它的核心思想是将资源的管理与对象的生命周期紧密绑定…

「QT」几何数据类 之 QVector4D 四维向量类

✨博客主页何曾参静谧的博客📌文章专栏「QT」QT5程序设计📚全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…

docker desktop运行rabittmq容器,控制台无法访问

docker desktop运行rabittmq容器,控制台无法访问 启动过程:…此处缺略,网上一大堆 原因 原因是在Docker上运行的RabbitMQ,默认情况下是没有启用管理插件和管理页面的 解决办法 使用命令 docker exec -it 容器id /bin/bash 进…

MySQL-事务(详细版)

目录 事务的含义 举一个例子 事务的特征(面试高频) 原子性 一致性 隔离性 持久性 事务结束 查看事务提交方式 查看事务提交的变量值:on 自动提交 off 不是自动提交 实例 事务回滚 验证事务回滚 事务实现:是数据库提…

Python “文件和IO操作” ——Python面试100道实战题目练习,巩固知识、检查技术、成功就业

本文主要是作为Python中“文件和IO操作”的一些题目,方便学习完Python的函数之后进行一些知识检验,感兴趣的小伙伴可以试一试,含选择题、判断题、填空题。 在做题之前可以先学习或者温习一下Python的异常处理机制,推荐阅读下面这篇…

【Docker】自定义网络:实现容器之间通过域名相互通讯

文章目录 一. 默认网络:docker0网络的问题二. 自定义网络三. nginx容器指之间通过主机名进行内部通讯四. redis集群容器(跳过宿主机)内部网络通讯1. 集群描述2. 基于bitnami镜像的环境变量快速构建redis集群 一. 默认网络:docker0…

Kafka-Eagle的配置——kafka可视化界面

通过百度网盘分享的文件:kafka-eagle-bin-2.0.8.tar.gz 链接:https://pan.baidu.com/s/1H3YONkL97uXbLTPMZHrfdg?pwdsltu 提取码:sltu 一、界面展示 二、软件配置 1、关闭kafka集群 kf.sh stop 2、将该软件上传到/opt/modules下 cd /opt…

计算机图形学论文 | 木工设计与制造计划的共同优化

🦌🦌🦌读论文 我们的系统共同探索离散设计变量和制造计划的空间,以生成(设计,制造计划)对的帕累托前沿,使制造成本最小化。在该图中,(a)是椅子的输入设计和仅探索该设计的…

【百日算法计划】:每日一题,见证成长(023)

题目 每日温度 请根据每日气温列表,重新生成一个列表,对应的位置的输出为:要想观测到更高的气温,至少需要等待的天数.如果气温在这之后都不再升高,则该位置用0代替. 例如,给定一个列表[73, 74, 65, 80,] 你的输出应该是[1, 2, 1, 0] 思路 首先,我们先来画图分析一…

【在Linux世界中追寻伟大的One Piece】多路转接epoll

目录 1 -> I/O多路转接之poll 1.1 -> poll函数接口 1.2 -> poll的优点 1.3 -> poll的缺点 1.4 -> poll示例 1.4.1 -> 使用poll监控标准输入 2 -> I/O多路转接之epoll 2.1 -> 初识epoll 2.2 -> epoll的相关系统调用 2.2.1 -> epoll_cre…

推动AI云产业向深向实,云·AI·算力创新发展大会即将启幕

近年来,以AIGC为代表的新兴技术正加速演进,全球站在智能化变革的起点,人工智能与云计算的深度融合,也驱动云计算进入第三次发展浪潮,迎来前所未有的机遇。 伴随AI的快速发展,2024年《政府工作报告》明确提…

5G 现网信令参数学习(3) - RrcSetup(1)

目录 1. rlc-BearerToAddModList 1.1 rlc-Config 1.1.1 ul-AM-RLC 1.1.2 dl-AM-RLC 1.2 mac-LogicalChannelConfig 2. mac-CellGroupConfig 2.1 schedulingRequestConfig 2.2 bsr-Config 2.3 tag-Config 2.4 phr-Config 2.5 skipUplinkTxDynamic 3. physicalCellG…