浏览器跨域详解

一、什么是跨域

浏览器跨域是指当一个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,服务端请求接口不会出现跨域的根本原因

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

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

相关文章

解决python/pycharm中import导入模块时报红却能运行的问题

一、问题 导入时报红&#xff0c;如下 二、解决 右键单击项目&#xff0c;将项目Mark Directory as→Sources Root 三、效果 报红消失 学习导航&#xff1a;http://www.xqnav.top

linux 设置开机自启终端,并自动执行命令

在Ubuntu 22.04中&#xff0c;可以通过创建一个名为 custom.desktop 的文件并将其放置在 /etc/xdg/autostart/ 目录中来实现开机自动打开命令行窗口并执行命令。 custom.desktop文件内容如下 [Desktop Entry] Version1.0 TypeApplication Namecustom Comment Execpython3 mai…

01背包问题+完全背包问题+多重背包问题+多重背包问题+分组背包问题

文章目录 01背包问题完全背包问题多重背包问题 I多重背包问题 II分组背包问题01背包问题 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i 件物品的体积是 vi,价值是 wi。 求解将哪些物品装入背包,可使这些物品的总体积不超过背包容量,且总价值最大。 输…

基于C++基础知识的循环语句

一、while循环 while循环语句形式如下&#xff1a; while(表达式){语句 } 循环每次都是执行完语句后回到表达式处重新开始判断&#xff0c;重新计算表达式的值&#xff0c;一旦表达式的值为假就退出循环。用花括号括起来的多条简单语句&#xff0c;花括号及其包含的语句被称…

淡茶和浓茶的标准

按照《品深淡茶冲泡标准》&#xff0c;淡茶茶汤中的咖啡碱不得高于31.67mg/100mL&#xff0c;可可碱不得高于2.67mg/mL&#xff0c;茶碱不得高于1.50mg/100mL&#xff0c;茶多酚不得高于143mg/mL&#xff0c;按照各类茶叶中各物质的含量情况&#xff0c;茶水比例不得高于1:150&…

JRT1.6发布

经过51的三天努力&#xff0c;完成基于JRT的质控核心部分。框架部分已经达到了第一个可生产版本。 可生产包括以下部分&#xff1a; 1.Web开发基础和发布运维基础 2.Linux和WIndows客户端浏览器 3.Linux和WIndows客户端打印导出程序 4.Linux和WIndows初始化程序 5.Linux和WInd…

《自动机理论、语言和计算导论》阅读笔记:p428-p525

《自动机理论、语言和计算导论》学习第 14 天&#xff0c;p428-p525总结&#xff0c;总计 98 页。 一、技术总结 1.Kruskal’s algorithm(克鲁斯克尔算法) 2.NP-Complete Problems p434, We say L is NP-complete if the following statements are true about L: (1)L is …

计算机网络面试高频:输入域名会发生那些操作,开放性回答

更多大厂面试内容可见 -> http://11come.cn 计算机网络面试高频&#xff1a;输入域名会发生那些操作&#xff0c;开放性回答 输入域名之后&#xff0c;会发生哪些操作&#xff1f; 当在浏览器中输入www.baidu.com并按下回车键时&#xff0c;会触发一系列复杂的网络过程&am…

【菜单下拉效果】基于jquery实现二级菜单下拉效果(附完整源码下载)

Js菜单下拉特效目录 &#x1f354;涉及知识&#x1f964;写在前面实现效果&#x1f367;一、涉及知识&#x1f333;二、具体实现2.1 搭建一级菜单2.2 搭建二级菜单项2.3 引入js文件2.4 构建CSS文件 &#x1f40b;三、源码获取&#x1f305; 作者寄语 &#x1f354;涉及知识 ht…

VastGaussian:用于大型场景重建的巨大3D高斯函数

VastGaussian:用于大型场景重建的巨大3D高斯函数 摘要IntroductionRelated WorkPreliminariesMethod VastGaussian: Vast 3D Gaussians for Large Scene Reconstruction. 摘要 现有基于NeRF的大型场景重建方法在视觉效果和渲染速度方面往往存在限制。虽然最近的3D高斯分裂在小…

Content-Type请求头中有哪些字段,含义是什么

Content-Type 是一个 HTTP 头部字段&#xff0c;它表示发送到接收者的实体数据的媒体类型。以下是一些常见的 Content-Type 类型&#xff1a; text/plain&#xff1a;纯文本格式&#xff0c;不含任何格式化元素。 text/html&#xff1a;HTML 格式&#xff0c;用于发送 HTML 文…

AI智体的分级:从基于规则到基于LLM

摘要&#xff1a; AI智体被定义为感知环境、做出决策和采取行动的人工实体。受SAE&#xff08;汽车工程师学会&#xff09;自动驾驶6个级别的启发&#xff0c;AI智体也根据效用和强度进行分类&#xff0c;分为以下几个级别&#xff1a;L0——无AI&#xff0c;有工具&#xff0…

【C++】stack、queue和priority_queue的模拟实现

在本篇博客中&#xff0c;作者将会讲解STL中的stack、queue和priority_queue的模拟实现&#xff0c;同时还会带大家了解一下deque这个容器。 一.什么是适配器 STL中一共有6大组件&#xff1a;容器&#xff0c;适配器&#xff0c;空间配置器&#xff0c;仿函数&#xff0c;迭代器…

【码银送书第十九期】《图算法:行业应用与实践》

作者&#xff1a;嬴图团队 01 前言 在当今工业领域&#xff0c;图思维方式与图数据技术的应用日益广泛&#xff0c;成为图数据探索、挖掘与应用的坚实基础。本文旨在分享嬴图团队在算法实践应用中的宝贵经验与深刻思考&#xff0c;不仅促进业界爱好者之间的交流&#xff0c;…

RabbitMQ 是如何做延迟消息的 ?——Java全栈知识(15)

RabbitMQ 是如何做延迟消息的 &#xff1f; 1、什么是死信&#xff1f; 当一个队列中的消息满足下列情况之一时&#xff0c;可以成为死信&#xff08;dead letter&#xff09;&#xff1a; 消费者使用 basic.reject 或 basic.nack 声明消费失败&#xff0c;并且消息的 reque…

【Python】异常

当检测到一个错误时&#xff0c;Python解释器就无法继续执行了&#xff0c;反而出现了一些错误的提示&#xff0c;这就是所谓的“异常”&#xff0c;也就是我们常说的Bug 世界上没有完美的程序&#xff0c;任何程序在运行过程中&#xff0c;都有可能出现异常而导致程序无法完美…

2.4Java全栈开发前端+后端(全栈工程师进阶之路)-前端框架VUE3-基础-Vue组件

初识Vue组件 Vue中的组件是页面中的一部分&#xff0c;通过层层拼装&#xff0c;最终形成了一个完整的组件。这也是目前前端最流行的开发方 式。下面是Vue3官方给出的一张图&#xff0c;通过图片能清楚的了解到什么是Vue中的组件。 图的左边是一个网页&#xff0c;网页分为了…

memmove和memcpy

memmove和memcpy都是C语言中的函数&#xff0c;用于复制内存区域。它们的主要区别在于处理源内存区域和目标内存区域重叠的情况时的行为。 memcpy函数假定源内存区域和目标内存区域不会重叠。如果它们重叠&#xff0c;memcpy的行为是未定义的&#xff0c;可能会导致数据错误。因…

ECS弹性云服务器居然这么好用。

引言 在过去的十年里&#xff0c;云计算从一个前沿概念发展为企业和开发者的必备工具。传统的计算模型通常局限于单一的、物理的位置和有限的资源&#xff0c;而云计算则通过分布式的资源和服务&#xff0c;为计算能力带来了前所未有的"弹性"。 云弹性服务器——为什…

AAA、RADIUS、TACACS、Diameter协议介绍

准备软考高级时碰到的一个概念&#xff0c;于是搜集网络资源整理得出此文。 概述 AAA是Authentication、Authorization、Accounting的缩写简称&#xff0c;即认证、授权、记帐。Cisco开发的一个提供网络安全的系统。AAA协议决定哪些用户能够访问服务&#xff0c;以及用户能够…