【Ajax】笔记-同源策略

news2025/2/23 13:48:54

同源策略(Same-Origin Policy),是浏览器的一种安全策略

  • 同源(即url相同):协议、域名、端口号 必须完全相同。(请求是来自同一个服务)

  • 跨域:违背了同源策略,即跨域。

  • ajax请求是遵循同源策略的。
    在这里插入图片描述

  • 同源请求例子(在浏览器访问127.0.0.1:9000/server-orign,然后点击按钮发送同源请求):

  • 服务端对同源请求处理:

//3、创建路由规则(request 是请求的报文,response是响应的报文)
app.get('/server-orign', (request, response) => {
    //响应一个页面
    response.sendFile(__dirname + '/同源策略.html');
});
app.get('/data', (request, response) => {
    //响应数据
    response.send('服务端返回的数据');
});
  • 客户端html:
const btn = document.getElementsByTagName('button')[0];
    btn.onclick = function () {
        //console.log('测试');
        //发送ajax请求
        const xhr = new XMLHttpRequest();
        xhr.open('GET', '/data');//同源请求,路径可以简写
        xhr.send();
        xhr.onreadystatechange = function () {
           if(xhr.readyState === 4){
               if(xhr.status >= 200 && xhr.status < 300){
                   console.log(xhr.response);
               }
           }
        }
    }
  1. 同源策略的目的

同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

  1. 同源策略的限制范围
  • 随着互联网的发展,“同源策略”越来越严格,目前,如果非同源,以下三种行为都将收到限制。
    // 1. Cookie、LocalStorage 无法读取。不能共享cookie。
    // 2. DOM 无法获得,不能互相操作dom
    // 3. AJAX 请求不能发送。

虽然这些限制是很有必要的,但是也给我们日常开发带来不好的影响。比如实际开发过程中,往往都会把服务器端架设到一台甚至是一个集群的服务器中,把客户端页面放到另外一个单独的服务器,那么这时候就会出现不同源的情况,如果我们知道两个网站都是安全的话,我们是希望两个不同源的网站之间可以相互请求数据的。
• 这就需要使用到跨域。

解决跨域(JSONP、CORS)

  1. JSONP
  2. CORS
  3. WebSocket

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

手把手教-gd32f450基于rt-thread发布的bsp包手动添加以太网外设

一、开发环境 rt-thread发布版本4.1.0&#xff1b; bsp包选用的是gd32目录下的gd32450z-eval rt-thread-v4.1.0\bsp\gd32\gd32450z-eval\ 开发板gd32f450z系列开发板。 二、手动添加以太网ETH外设 先看下初始结构 可以看到&#xff0c;配置中什么也没有。 手动添加步骤如下&…

27.提示卡片

提示卡片 html部分 <div class"msg-list"></div><button class"btn">点我看提示</button>css部分 *{margin: 0;padding: 0; }body{background-color: rebeccapurple;height: 100vh;overflow: hidden;display: flex;justify-con…

机器学习入门之 特征工程

数据集 数据集划分 ,训练集与 测试集合 from sklearn.datasets import load_iris from sklearn.model_selection import train_test_split from sklearn.feature_extraction import DictVectorizer from sklearn.feature_extraction.text import CountVectorizer, TfidfVecto…

【FPGA/D6】

2023年7月25日 VGA控制器 视频23notecodetb 条件编译error时序图保存与读取&#xff1f;&#xff1f;RGBTFT显示屏 视频24PPI未分配的引脚或电平的解决方法 VGA控制器 视频23 note MCU单片机 VGA显示实时采集图像 行消隐/行同步/场同步/场消隐 CRT&#xff1a;阴极射线管 640…

8.9 PowerBI系列之DAX函数专题- TopN和BottomN和otherN的实现

需求 实现 1 summary table summarize(order_2,order_2[产品子类别],"订单金额",sum(order[订单金额])) 2 bottom5 table topn(5,summary table,summary table[订单金额],desc) // var v_sum_table summarize(order_2,order_2[产品子类别],"订单金额",…

【Linux】常见的基本指令详解

Linux常见的基本指令 一、什么是 Linux二、Linux 中常见的指令1. ls 指令2. pwd 命令3. cd 指令4. touch 指令5. mkdir 指令6. rmdir 指令 && rm 指令7. man 指令8. cp 指令9. mv 指令10. cat 指令11. more 指令12. less 指令13. wc 指令和 uniq 指令14. head 指令15. …

AIGC书籍推荐:《生成式深度学习的数学原理》

生成式 AI 使用各种机器学习算法&#xff0c;从数据中学习要素&#xff0c;使机器能够创建全新的数字视频、图像、文本、音频或代码等内容。生成式 AI 技术在近两年取得了重大突破&#xff0c;产生了全球性的影响。它的发展离不开近年来生成式深度学习大模型的突破。与一般意义…

【学习心得】sublime text 4 自定义编译系统

一、问题描述 在电脑中有多个版本的Python解释器&#xff0c;而sublime默认选择最新版本的解释器&#xff0c;如何指定自己想要的解释器呢&#xff1f; 二、自定义编译系统 1、选择新建编译系统&#xff08;如图&#xff09; 2、重写两个键值对&#xff08;只修改中文部分其…

线性代数(主题篇):第三章:向量组 、第四章:方程组

文章目录 第3章 n维向量1.概念(1)n维单位列向量 2.向量、向量组的的线性关系(线性相关性)(1)线性表示 &#xff1a;AXβ(2)线性相关、线性无关&#xff1a; AX0①线性相关②线性无关③线性相关性7大定理 3.极大线性无关组、等价向量组、向量组的秩1.极大线性无关组2.等价向量组…

人工智能术语翻译(三)

文章目录 摘要IJKL 摘要 人工智能术语翻译第二部分&#xff0c;包括I、J、K、L开头的词汇&#xff01; I 英文术语中文翻译常用缩写备注I.I.D. Assumption独立同分布假设Identically Distributed同分布的Identifiable可辨认的Identity Function恒等函数Identity Mapping恒等…

基于Citespace、vosviewer、R语言的文献计量学可视化分析及SCI论文高效写作方法教程

详情点击链接&#xff1a;基于Citespace、vosviewer、R语言的文献计量学可视化分析技术及全流程文献可视化SCI论文高效写作方法 前言 文献计量学是指用数学和统计学的方法&#xff0c;定量地分析一切知识载体的交叉科学。它是集数学、统计学、文献学为一体&#xff0c;注重量…

小程序插件接入指引

微信对话开放平台小程序插件 微信对话开放平台是以对话交互为核心, 为有客服需求的个人、企业和组织提供智能服务与用户管理的配置平台。开发者可利用我们提供的工具自主完成对话机器人的搭建。 微信对话开放平台小程序插件&#xff0c;提供两种调用方式&#xff0c;一种是有U…

jdk1.7官网免登录下载

官网地址&#xff1a; Java Archive Downloads - Java SE 7 (oracle.com) 点进去之后&#xff0c;就可以看见如下的的界面 打开迅雷&#xff0c;在下载中点击新建 补充&#xff1a; jdk各个版本的地址&#xff1a; Java Archive | Oracle

春秋云境:CVE-2022-23316(taoCMS v3.0.2 存在任意文件读取漏洞)

一、题目 靶标介绍&#xff1a; taoCMS v3.0.2 存在任意文件读取漏洞 二、进入题目 和这题有异曲同工之妙&#xff1a; 春秋云境&#xff1a;CVE-2022-23880&#xff08;taoCMS v3.0.2 任意文件上传漏洞&#xff09;_小孔吃不胖的博客-CSDN博客 访问/admin admin&#xf…

汽车充电桩按照安装的地点可以分哪几类

汽车充电桩按照安装地点分哪几类 你是否曾经想过&#xff0c;在城市的大街小巷中&#xff0c;那一排排沉默的绿色盒子&#xff0c;究竟是什么?它们叫做汽车充电桩&#xff0c;是我们未来出行的重要一环。那么&#xff0c;你知道这些充电桩按照安装地点分哪几类吗? 汽车充电桩…

vue3:vue3.2升级至vue3.3/vue升级版本

一、目标 Vue 3.2项目到Vue 3.3 二、操作 2.1、更新Vue的版本 pnpm add vuelatest2.2、更新Vue CLI的版本 如果你正在使用Vue CLI来创建和管理你的Vue项目&#xff0c;更新Vue CLI pnpm add -g vue/clilatest2.3、检查你的Vue项目的依赖项 你需要确保项目中的所有依赖项…

【面试】MySQL 中InnoDB与MyISAM的区别是什么?

文章目录 前言一、数据库存储引擎二、如何知道自己的数据库用的什么引擎呢&#xff1f;三、存储引擎原理四、B 树和 B 树五、MyISAM六、InnoDB七、InnoDB与MyISAM的区别总结 前言 许多同学都把 MySQL 作为自己的数据库&#xff0c;但是可能用过最多的就是 SQL 语句&#xff0c…

降压电路原理 12V电源是如何下降到5V?

引言&#xff1a; 12V-5V开关电源设计原理&#xff1a;以12V电压作为输入&#xff0c;通过控制开关电路的通断时间&#xff0c;实现电感的充放电时间&#xff0c;改变输出电压的平均值&#xff0c;然后进行LC滤波&#xff0c;对输出电压进行电压和电流反馈控制&#xff0c;使其…

open3d和pcl点云转换及多线程加速

目录 写在前面准备转换源码编译运行结果 参考完 写在前面 1、本文内容 open3d和pcl点云互转&#xff0c;并使用多线程加速 2、平台/环境 通过cmake构建项目&#xff0c;跨平台通用&#xff1b;open3d&#xff0c;pcl 3、转载请注明出处&#xff1a; https://blog.csdn.net/qq…

【Visual Studio】VS调用tensorflow C++API的配置(无需编译)

1. 首先下载并安装visual studio Visual Studio 2015 安装教程&#xff08;附安装包&#xff09;&#xff0c;按照博客中顺序来就可以 如果在安装过程中提示安装包损失或毁坏&#xff0c;参考VS2015安装过程中安装包丢失或损坏解决办法 卡在哪个搜索文件上就找到哪个文件再继…