浏览器同源策略

浏览器同源策略

同源策略 :是一个重要的浏览器的安全策略 ,用于限制一个源 的文档或者它加载的脚本如何能与另一个源的资源进行交互

它能帮助阻隔恶意文档,减少可能被攻击的媒介

例如:被钓鱼网站收集信息,使用ajax发起恶意请求,传递转账信息给银行服务器

web内部的源 由 用于访问它的协议 域名 端口 组成,只有当协议 域名 端口都匹配时,两个对象才有相同的源

同源

网页加载时所在的源,和Ajax请求时的源 协议 域名 端口 全部相同即为同源

跨域

跨域: 从一个源的文档,加载另一个源的资源就产生了跨域

案例:网页所在源Ajax访问的源(协议,域名,端口) 有一个不同, 就发生了跨域访问,请求响应是失败的

javascript 复制代码
	<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 响应头字段 允许除了它自己以外的源来访问自己的资源

javascript 复制代码
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')))
javascript 复制代码
/* 
基于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服务已启动")
})
相关推荐
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
lihainuo4 小时前
Next.js + AI-SDK 实战:模型注册表从类型设计到工具调用全解析
后端·node.js
胡gh4 小时前
JavaScript 中的闭包、防抖与节流:让你彻底搞懂它们的作用和应用场景
前端·javascript·node.js
野槐5 小时前
vue3+node.js+mysql写接口(二)
node.js
讨厌吃蛋黄酥5 小时前
🚀 全栈开发48小时逆袭:用Node.js打造超炫实时数据仪表盘! 📊
node.js·全栈
天若有情6735 小时前
Node.js 是什么?npm 是什么? Vue 为什么需要他们?
vue.js·npm·node.js
爱敲代码的小冰6 小时前
npm 切换 node 版本 和npm的源
前端·npm·node.js
甜瓜看代码16 小时前
1.
react.js·node.js·angular.js
伍哥的传说16 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
01传说17 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js