微站图片,2023年新闻摘抄,职业生涯规划大赛点评,做网站需要哪些素材浏览器同源策略
同源策略#xff1a;是一个重要的浏览器的安全策略#xff0c;用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互
它能帮助阻隔恶意文档#xff0c;减少可能被攻击的媒介
例如#xff1a;被钓鱼网站收集信息#xff0c;使用ajax发起…浏览器同源策略
同源策略是一个重要的浏览器的安全策略用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互
它能帮助阻隔恶意文档减少可能被攻击的媒介
例如被钓鱼网站收集信息使用ajax发起恶意请求传递转账信息给银行服务器 源
web内部的源 由 用于访问它的协议 域名 端口 组成只有当协议 域名 端口都匹配时两个对象才有相同的源
同源
网页加载时所在的源和Ajax请求时的源 协议 域名 端口 全部相同即为同源
跨域
跨域: 从一个源的文档加载另一个源的资源就产生了跨域
案例网页所在源 和Ajax访问的源(协议域名端口) 有一个不同 就发生了跨域访问请求响应是失败的 script// 请求本机web服务提供的省份列表数据// http://127.0.0.1:5500/index.html 网页加载时所在的源// http://localhost:3000/api/province axios请求的源axios({url:http://localhost:3000/api/province}).then(res{console.log(res)})/script跨域解决方案1–CORS
前后端分离的项目前端和后端不在一个源还要保证数据通信
采用CORS(跨域资源共享)一种基于HTTP头的机制该机制通过允许服务器标示除了它自己以为的其他源使得浏览器允许这些源访问加载自己的资源
步骤
服务器端 :设置Access-Control-Allow-Origin 响应头字段 允许除了它自己以外的源来访问自己的资源
1.下载cors本地软件包
2.导入cors函数
3.使用server.use() 给web服务添加插件功能
4.把cors函数调用传入给web服务 启动测试const cors require(cors)
server.use(cors())前端 正常发起Ajax请求无需额外的操作
跨域解决方案2–同源访问
开发环境用cors上线部署关闭cors并采用同源访问方式
做法让后端web服务既可以提供数据接口也可以访问网页资源
安全后端的接口不允许非同源来访问
// 暴露指定的文件夹让前端可以直接拼接路径和资源名字来访问
server.use(express.static(path.join(__dirname,public)))/*
基于express本地软件包 开发提供省份列表数据的接口
步骤监听get请求方法 /api/province 路径 并读取province.json里省份的数据返回给请求方
*/
// 1. 下载express软件包
// 2. 导入并创建web服务对象
const fs require(fs)
const path require(path)
// const cors require(cors)
const express require(express)
const server express()
// server.use(cors())console.log(path.join(__dirname, public))// 暴露指定的文件夹让前端可以直接拼接路径和资源名字来访问
server.use(express.static(path.join(__dirname, public)))/*
1.下载cors本地软件包
2.导入cors函数
3.使用server.use() 给web服务添加插件功能
4.把cors函数调用传入给web服务 启动测试*/// // 3. 监听请求的方法和资源路径
// server.get(/,(req,res){
// res.send(您好 欢迎使用express)
// })// 监听get请求方法 /api/province 资源路径
server.get(/api/province, (req, res) {// 读取province.json中数据fs.readFile(path.join(__dirname, /data/province.json), (err, data) {res.send(data.toString())})
})// 4. 监听任意的请求方法和请求的资源路径
server.all(*, (req, res) {res.status(404)res.send(您访问的资源路径不存在)
})// 5. 监听端口号 启动web服务
server.listen(3000, () {console.log(web服务已启动)
})
