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

浏览器跨域详解

news 2026/2/7 11:57:48

一、什么是跨域

浏览器跨域是指当一个Web应用程序试图访问另一个协议、主机或端口不同的资源时，所发生的情况。这主要是由于浏览器的同源策略造成的，它是为了网站的安全而设置的安全限制，防止一个网站恶意访问另一个网站的资源。当然这是比较简单的回答，其实跨域请求也分为简单请求，预检请求

1.简单请求

当请求同时满足以下条件时，浏览器会认为它是一个简单请求
1.请求属于下面的一种：

  • get
  • post
  • head

2.请求头仅包含安全的字段，常见安全字段如下：

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
  • DPR
  • DownLink
  • Save-Data
  • Viewport-Width
  • Width

3.请求头如果包含Content-type，仅限下面的值之一：

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

浏览器发现这个是简单请求后，会在请求头中自动添加Origin字段，告诉服务器这个请求来自哪里，其实服务器对简单请求是进行了响应，也返回了正确的数据，但是浏览器发现服务器的响应头里面没有Access-Control-Allow-Origin字段，或者这个字段的值不为*或者是页面的地址，浏览器会进行拦截，不给数据，可以用node.js简单的写一个接口试试，贴一段测试代码吧

const express = require('express')
const app = express()
const port = 3000app.get('/api', (req, res) => {console.log(req.path);//res.setHeader("Access-Control-Allow-Origin","*");  //打开就不跨越了res.send('Hello World!')
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>fetch("http://127.0.0.1:3000/api")
</script>
</html>

要是这代码都看不懂，那就多学学吧

2.需要预检的请求

不是上述的简单请求就属于需要预检的请求，首先浏览器会发送一个option方法的预检请求，询问服务器是否允许，如何不需要就报跨域错误，服务器运行才会发送真实的请求。
预检请求有以下特征

  • 请求方法为OPTION
  • 没有请求体
  • 请求头中包含
    1.Origin:请求的源，和简单请求的含义一致
    2.Access-Control-Request-Method:后续的真实请求将使用的方法
    3.Access-Control-Request-Headers:后续的真实请求会改动的请求头
    服务器收到预检请求后，如果允许，必须响应以下消息格式
  • Access-control-Allow-Origin：允许的请求来源
  • Access-control-Allow-Methods：允许的请求方式
  • Access-control-Allow-Headers：允许改动的请求头

浏览器收到这种响应体后，才会发送真实的请求
可以看出来，跨域就是浏览器搞出来的，要么不给服务器响应结果，要么连请求都不发送给服务器，所以跨域只存在于浏览器环境，这也是为啥postman，服务端请求接口不会出现跨域的根本原因

相关文章：

浏览器跨域详解

一、什么是跨域 浏览器跨域是指当一个Web应用程序试图访问另一个协议、主机或端口不同的资源时&#xff0c;所发生的情况。这主要是由于浏览器的同源策略造成的&#xff0c;它是为了网站的安全而设置的安全限制&#xff0c;防止一个网站恶意访问另一个网站的资源。当然这是比较…...

编程日记 2024/5/7 4:55:21

华为5700配置

恢复出厂设置&#xff0c;清空配置 1、更改名字 system-view sysname tp-10-50-01-04 2、配置管理接口 int vlan 1 ip add 10.50.1.4 255.255.254.0 quit 2、链路汇聚 interface eth-trunk 1 mode lacp quit 3、绑定端口 interface eth-trunk 1 trunkport gigabitethernet …...

编程日记 2024/5/7 4:52:18

使用Axios从前端上传文件并且下载后端返回的文件

前端代码&#xff1a; function uploadAndDownload(){showLoading();const fileInput document.querySelector(#uploadFile);const file fileInput.files[0];const formData new FormData()formData.append(file, file)return new Promise((resolve, reject) > {axios({…...

编程日记 2024/5/7 4:51:17

open 函数到底做了什么

使用设备之前我们通常都需要调用 open 函数&#xff0c;这个函数一般用于设备专有数据的初始化&#xff0c;申请相关资源及进行设备的初始化等工作&#xff0c;对于简单的设备而言&#xff0c;open 函数可以不做具体的工作&#xff0c;你在应用层通过系统调用 open 打开设备…...

编程日记 2024/5/7 4:50:15

ue引擎游戏开发笔记（32）——为游戏添加新武器装备

1.需求分析&#xff1a; 游戏中角色不会只有一种武器&#xff0c;不同武器需要不同模型&#xff0c;甚至可能需要角色持握武器的不同位置&#xff0c;因此需要添加专门的武器类&#xff0c;方便武器后续更新&#xff0c;建立一个武器类。 2.操作实现&#xff1a; 1.在ue5中新建…...

编程日记 2024/5/7 4:46:11

【个人博客搭建】（17）使用FluentValidation 参数校验

FluentValidation 是一个用于 .NET 的开源验证库&#xff0c;它提供了一种流畅的接口和强类型验证规则&#xff0c;使得验证逻辑表达得更加清晰和简洁。&#xff08;Apache-2.0&#xff09; FluentValidation 的主要作用包括&#xff1a; 提高代码可读性&#xff1a;通过使用 F…...

编程日记 2024/5/7 4:45:10

数据结构===散列表

文章目录 概要散列思想散列函数散列冲突开放寻址法装载因子 链表法 代码Java小结 概要 散列表是一种很有趣的数据结构。 散列表是一个很有用的数据结构。它是数组演练而来的&#xff0c;又是一个基于数组的扩展的数据结构。接下来看看。 散列思想 散列表用的是数组支持按照下…...

编程日记 2024/5/7 4:44:09

10G MAC层设计系列-（2）MAC RX模块

一、概述 MAC RX模块的需要进行解码、对齐、CRC校验。 因为在空闲的时候10G PCS/PMA会一直向外吐空闲符&#xff08;x07&#xff09;所以需要根据开始符、结束符将有效数据从码流中截取&#xff0c;也就是解码。 因为开始字符的所在位置有两种形式&#xff0c;而结束字符的位…...

编程日记 2024/5/7 4:43:08

解码Starknet Verifier：深入逆向工程之旅

1. 引言 Sandstorm为&#xff1a; 能提交独立proof给StarkWare的Ethereum Verifier&#xff0c;的首个开源的STARK prover。 开源代码见&#xff1a; https://github.com/andrewmilson/sandstorm&#xff08;Rust&#xff09; L2Beat 提供了以太坊上Starknet的合约架构图&…...

编程日记 2024/5/7 4:42:07

【C++语言】类和对象--默认成员函数 （中）

文章目录 前言类的六个默认成员函数&#xff1a;1. 构造函数概念特性做了什么&#xff1f;易错注意&#xff1a;显式定义和默认构造函数 2. 析构函数概念特征做了什么?注意事项&#xff1a; 3.拷贝构造函数概念特征做了什么&#xff1f;注意事项&#xff1a; 4.赋值运算符重载…...

编程日记 2024/5/7 4:40:05

前端递归常见应用

概览 在 JavaScript 中&#xff0c;递归是一种编程技术&#xff0c;指的是函数直接或间接调用自身的过程。 递归通常用于解决可以分解为相同子问题的问题。通过不断地将问题分解成更小的、相似的子问题&#xff0c;直到达到某种基本情况&#xff08;不再需要进一步递归的简单情…...

编程日记 2024/5/7 4:39:04

AI工具如何改变我们的工作与生活

AI工具在当今社会中扮演着越来越重要的角色&#xff0c;它们已经开始改变着我们的工作方式和生活方式。在接下来的2000字篇幅中&#xff0c;我将详细探讨AI工具如何影响我们的工作和生活。 AI工具在工作中的影响&#xff1a; 自动化和智能化生产流程&#xff1a; AI工具可以通…...

编程日记 2024/5/7 4:36:01

深入了解C/C++的内存区域划分

&#x1f525;个人主页&#xff1a;北辰水墨 &#x1f525;专栏&#xff1a;C学习仓 本节我们来讲解C/C的内存区域划分&#xff0c;文末会附加一道题目来检验成果&#xff08;有参考答案&#xff09; 一、大体有哪些区域&#xff1f;分别存放什么变量开辟的空间&#xff1f; …...

编程日记 2024/5/7 4:35:00

C++构造函数和析构函数的调用顺序

一般情况下&#xff0c;调用析构函数的次序正好与调用构造函数的次序相反&#xff0c;也就是最先被调用的构造函数&#xff0c;其对应的析构函数最后被调用&#xff0c;而最后被调用的构造函数&#xff0c;其对应的析构函数最先被调用。 当然对象的构造函数和析构函数调用时机和…...

编程日记 2024/5/7 4:33:59

智能家居1 -- 实现语音模块

项目整体框架: 监听线程4&#xff1a; 1. 语音监听线程:用于监听语音指令&#xff0c; 当有语音指令过来后&#xff0c; 通过消息队列的方式给消息处理线程发送指令 2. 网络监听线程&#xff1a;用于监听网络指令&#xff0c;当有网络指令过来后&#xff0c; 通过消息队列的方…...

编程日记 2024/5/7 4:32:58

Leetcode 3139. Minimum Cost to Equalize Array

Leetcode 3139. Minimum Cost to Equalize Array 1. 解题思路2. 代码实现 题目链接&#xff1a;3139. Minimum Cost to Equalize Array 1. 解题思路 这一题是一道hard的题目&#xff0c;而且看了一下答出率低的离谱&#xff0c;就一开始被吓到了&#xff0c;不过实际做了一下…...

编程日记 2024/5/7 4:30:55

【element-ui】el-table横向滚动后，通过is-scrolling-left获取滚动高度失效的问题

el-table横向滚动后&#xff0c;通过is-scrolling-left获取滚动高度失效的问题 需求 现在有一个需求&#xff0c;需要监听el-table的纵向滚动&#xff0c;当滚动高度达到特定值时进行一些操作。 代码如下&#xff1a; methods:{throttledHandleScroll() {// 如果已经有定时器…...

编程日记 2024/5/7 4:29:54

JAVA中的日期

获取当前的日期 LocalDate LocalDate today LocalDate.now();System.out.println("今天是:"today);//今天是:2024-05-06String format today.format(DateTimeFormatter.ofPattern("yyyy年MM月dd日"));System.out.println("今天是&#xff1a;"…...

编程日记 2024/5/7 4:28:53

一起了解开源自定义表单的优势表现

随着社会的进步和科技的发展&#xff0c;越来越多的中小企业希望采用更为先进的软件平台&#xff0c;助力企业实现高效率的流程化管理。低代码技术平台、开源自定义表单已经慢慢走入大众视野&#xff0c;成为一款灵活、高效的数字化转型工具。流辰信息专注于低代码技术平台的研…...

编程日记 2024/5/7 4:26:50

体育老师工资高吗,奖金有吗

教师的薪资水平与多种因素相关&#xff0c;包括教育经验、工作地点、学校类型以及个人的教学成果等。在讨论体育教师的工资问题时&#xff0c;不能仅仅关注数字&#xff0c;更应了解教育价值和个人发展。 初中体育教师的工资水平受多种因素影响。根据网络统计的数据&#xff0c…...

编程日记 2024/5/7 4:25:49

龙虎榜——20250610

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

编程新知 2026/2/7 5:06:52

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/2/1 19:26:16

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2026/1/25 14:43:07

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2026/1/29 20:58:41

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2026/1/30 4:58:21