网站如何做漂浮窗,网站建设工具品牌,装修设计培训学校,博客网站首页设计一、什么是跨域
浏览器跨域是指当一个Web应用程序试图访问另一个协议、主机或端口不同的资源时#xff0c;所发生的情况。这主要是由于浏览器的同源策略造成的#xff0c;它是为了网站的安全而设置的安全限制#xff0c;防止一个网站恶意访问另一个网站的资源。当然这是比较…一、什么是跨域
浏览器跨域是指当一个Web应用程序试图访问另一个协议、主机或端口不同的资源时所发生的情况。这主要是由于浏览器的同源策略造成的它是为了网站的安全而设置的安全限制防止一个网站恶意访问另一个网站的资源。当然这是比较简单的回答其实跨域请求也分为简单请求预检请求
1.简单请求
当请求同时满足以下条件时浏览器会认为它是一个简单请求 1.请求属于下面的一种
getposthead
2.请求头仅包含安全的字段常见安全字段如下
AcceptAccept-LanguageContent-LanguageContent-TypeDPRDownLinkSave-DataViewport-WidthWidth
3.请求头如果包含Content-type仅限下面的值之一
text/plainmultipart/form-dataapplication/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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
scriptfetch(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服务端请求接口不会出现跨域的根本原因
