浏览器同源策略

浏览器同源策略

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

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

例如:被钓鱼网站收集信息,使用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服务已启动")
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/79180.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Containerd的两种安装方式

1. 轻量级容器管理工具 Containerd 2. Containerd的两种安装方式 3. Containerd容器镜像管理 4. Containerd数据持久化和网络管理 操作系统环境为centos7u6 1. YUM方式安装 1.1 获取YUM源 获取阿里云YUM源 # wget -O /etc/yum.repos.d/docker-ce.repo https://mirrors.aliyun…

滇医通微信小程序分析笔记

注意 本文章仅供学习交流使用&#xff0c;如果你是铁粉你就会知道博主之前发布过一篇相关的文章&#xff0c;但是由于代码涉及到法律相关所以就隐藏了&#xff0c;两年的时间过去了&#xff0c;因为女朋友已经早早安排上了&#xff0c;所以就搁置了&#xff0c;本次不做代码分…

[国产MCU]-BL602开发实例-开发环境搭建

开发环境搭建 文章目录 开发环境搭建1、BL602介绍2、软件准备3、源码编译3.1 编译内置工程3.2 自定义工程、自定义组件添加与编译4、固件下载BL602 是一款Wi-Fi + BLE组合的芯片组,用于低功耗和高性能应用开发。无线子系统包含2.4G无线电,Wi-Fi 802.11b/g/n和BLE 5.0 基带/MA…

了解HTTP代理日志:解读请求流量和响应信息

嗨&#xff0c;爬虫程序员们&#xff01;你们是否在了解爬虫发送的请求流量和接收的响应信息上有过困扰&#xff1f;今天&#xff0c;我们一起来了解一下。 首先&#xff0c;我们需要理解HTTP代理日志的基本结构和内容。HTTP代理日志是对爬虫发送的请求和接收的响应进行记录的文…

MacOS上用docker运行mongo及mongo-express

MongoDB简介 MongoDB 是一个基于分布式文件存储的数据库。由 C 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。 MongoDB 是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的。 前提 要求…

AOP实现日志的打印

AOP面向切面编程&#xff0c;是一种抽象化的面向对象编程&#xff0c;也可以理解为对面向对象编程的补充 下面来举一个打印日志的例子 问题描述&#xff1a;写一个计算器的实现类&#xff0c;实现加减乘除功能&#xff0c;并在进行计算前日志输出方法&#xff0c;计算后输出结…

jmeter工具测试和压测websocket协议【杭州多测师_王sir】

一、安装JDK配置好环境变量&#xff0c;安装好jmeter 二、下载WebSocketSampler发送请求用的&#xff0c;地址&#xff1a;https://bitbucket.org/pjtr/jmeter-websocket-samplers/downloads/?spma2c4g.11186623.2.15.363f211bH03KeI 下载解压后的jar包放到D:\JMeter\apache-j…

从小白到数据库达人!Mysql优化让你的社招面试无往不利!

大家好&#xff0c;我是小米&#xff0c;在这个美好的时刻又迎来了我们的技术小窝。今天&#xff0c;我们要聊一聊一个在数据库领域中无比重要的话题 —— Mysql 优化&#xff01;是不是感觉很兴奋呢&#xff1f;废话不多说&#xff0c;让我们直接进入今天的主题。 背景知识 …

STM32——LED内容补充(寄存器点灯及反转的原理)

文章目录 点灯流程开时钟配置IO关灯操作灯反转宏定义最后给自己说 本篇文章使用的是STM32F103xC系列的芯片&#xff0c;四个led灯在PE2,PE3,PE4,PE5上连接 点灯流程 1.开时钟 2.配置IO口 &#xff08;1&#xff09;清零指定寄存器位 &#xff08;2&#xff09;设置模式为推挽输…

一键开启ChatGPT“危险发言”

‍ ‍ 大数据文摘授权转载自学术头条 作者&#xff1a;Hazel Yan 编辑&#xff1a;佩奇 随着大模型技术的普及&#xff0c;AI 聊天机器人已成为社交娱乐、客户服务和教育辅助的常见工具之一。 然而&#xff0c;不安全的 AI 聊天机器人可能会被部分人用于传播虚假信息、操纵舆…

【jvm】jvm整体结构(hotspot)

目录 一、说明二、java代码的执行流程三、jvm的架构模型3.1 基于栈式架构的特点3.2 基于寄存器架构的特点 一、说明 1.hotspot vm是目前市场上高性能虚拟机的代表作之一 2.hotspot采用解释器与即时编译器并存的架构 3.java虚拟机是用来解释运行字节码文件的&#xff0c;入口是字…

分布式系统:ACID与CAP

ACID: 在计算机科学中&#xff0c;ACID是数据库事务的一组特性&#xff0c;旨在保证数据的有效性&#xff0c;即使在出现错误、断电和其他意外情况下也能保持数据的一致性。在数据库的上下文中&#xff0c;满足ACID属性的一系列数据库操作&#xff08;可以被视为对数据的单一逻…

Vue实战技巧:从零开始封装全局防抖和节流函数

前言 你是否曾经遇到过用户频繁点击按钮或滚动页面导致反应迟钝的问题&#xff1f;这是因为事件被连续触发&#xff0c;导致性能下降。在本文中&#xff0c;我将为大家介绍 vue 中的防抖和节流策略&#xff0c;并展示如何封装全局的防抖节流函数&#xff0c;以避免频繁触发事件…

Tensorflow2-初识

TensorFlow2是一个深度学习框架&#xff0c;可以理解为一个工具&#xff0c;有谷歌的全力支持&#xff0c;具有易用、灵活、可扩展、性能优越、良好的社区资源等优点。 1、环境的搭建 1.1 Anaconda3的安装 https://www.anaconda.com/ Python全家桶&#xff0c;包括Python环境和…

Scratch 之 大地图引擎怎么做?

引子 简单的介绍一下&#xff0c;一些游戏引擎是有一个隐形小地图存在的&#xff0c;这个隐形小地图通常用来侦测碰碰撞和移动。那么&#xff0c;一个大地图引擎的背景肯定是很大的(一般来说大小都超过200)&#xff0c;如果我们要做出一个枪战作品&#xff0c;那就迟早会发现一…

Layui实现OA会议系统之会议管理模块总合

目录 一、项目背景 二、项目概述 1. 概述 2. 环境搭建 3. 工具类引用 4. 功能设计 4.1 会议发布 4.2 我的会议 4.3 会议审批 4.4 会议通知 4.5 待开会议 4.6 历史会议 4.7 所有会议 5. 性能优点 5.1 兼容性好 5.2 可维护性和可扩展性 5.3 轻量灵活 5.4 模块化设计…

图 ML 中的去噪扩散生成模型

Denoising Diffusion Generative Models in Graph ML | by Michael Galkin | Towards Data Science (medium.com) 一、说明 AI DDPM 代表【"Adaptive Importance Density Power Mixture Model" 】即“自适应重要性密度幂混合模型”&#xff0c;是一种用于密度估计的机…

8.物联网操作系统之事件标志组

。事件标志组定义 FreeRTOS事件标志组介绍 FreeRTOS事件标志组工作原理 一。事件标志组定义 信号量信号量只能实现任务与单个事件或任务间的同步。但是某些任务可能会需要与多个事件或任务进行同步&#xff0c;此时就可以使用事件标志组来解决。事件标志组能够实现某个任务与…

LeetCode--HOT100题(23)

目录 题目描述&#xff1a;206. 反转链表&#xff08;简单&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;206. 反转链表&#xff08;简单&#xff09; 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 LeetCode做题链接&…

Python头歌合集(题集附解)

目录 一、Python初识-基本语法 第1关&#xff1a;Hello Python! 第2关&#xff1a;我想看世界 第3关&#xff1a;学好Python 第4关&#xff1a;根据圆的半径计算周长和面积 第5关&#xff1a;货币转换 二、turtle简单绘图 第1关&#xff1a;英寸与厘米转换 第2关&#xff1…