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

浏览器跨域详解

news 文章来源：https://blog.csdn.net/lth002/article/details/138507813 2024/10/22 23:31:12

一、什么是跨域

浏览器跨域是指当一个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.需要预检的请求

相关文章：