浏览器跨域详解

奶昔不会射手

已于 2024-06-14 19:58:42 修改

阅读量354

点赞数 5

文章标签：前端跨域

于 2024-05-06 22:37:33 首次发布

本文链接：https://blog.csdn.net/lth002/article/details/138507813

版权

本文详细解释了浏览器跨域的概念，区分了简单请求和需要预检的请求，并介绍了服务器响应中的Access-Control策略。重点讨论了解决跨域问题的方法，包括使用反向代理和旧的JSONP技术。

摘要由CSDN通过智能技术生成

一、什么是跨域

浏览器跨域是指当一个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 = 3000

app.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，服务端请求接口不会出现跨域的根本原因

解决方法

一种方法就是上述那种，jsonp这方法就不说了，老掉牙的玩意儿，还有就是服务器配置反向代理，个人推荐反向代理这种方式，当然了，你要说服后端，反正就是一句话，叫后端解决

奶昔不会射手

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
浏览器跨域详解

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

扫一扫