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

浏览器跨域详解

news 2025/8/26 2:45: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，服务端请求接口不会出现跨域的根本原因

浏览器跨域详解

一、什么是跨域

1.简单请求

2.需要预检的请求

相关文章：

浏览器跨域详解

华为5700配置

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

open 函数到底做了什么

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

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

数据结构===散列表

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

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

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

前端递归常见应用

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

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

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

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

Leetcode 3139. Minimum Cost to Equalize Array

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

JAVA中的日期

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

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

生成xcframework

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

视觉slam十四讲实践部分记录——ch2、ch3

Go 并发编程基础：通道（Channel）的使用

Razor编程中@Html的方法使用大全

【堆垛策略】设计方法

论文阅读：Matting by Generation

绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化

Xcode 16 集成 cocoapods 报错

职坐标物联网全栈开发全流程解析